<template>
    <div class="container">
        <div class="page-title">
            <div class="title-content">
                <div class="title-img">
                    <img class="img" src="../assets/bk_arrow@2x.png" alt=""/>
                </div>
                <div class="title-text">仓 单 实 时 监 控</div>
                <div class="title-img">
                    <img class="img scaleX-img" src="../assets/bk_arrow@2x.png" alt=""/>
                </div>
            </div>
        </div>
        <el-dialog width="40%" :margin-left="(10/3840*100)+'vw'" :visible.sync="dialogFormAddVisible"
             append-to-body @close="cancelTree()">
            <Warehouse_tree ref="warehouseTree" @rotation="rotation" @endCarousel="endCarousel"  @close="cancelTree"></Warehouse_tree>
            <div slot="footer" align="center" :style="{marginTop: (-10/2160*100)+'vh'}">
                <!-- 确认 -->
                <el-button type="primary"  @click="confirmTree()">
                     确 定
                </el-button>
                <!-- 取消 -->
                <el-button type="warning" @click="cancelTree()">
                    取 消
                </el-button>
            </div>
        </el-dialog>
        <div class="contain">
            <div class="aside-left">
                <div @mouseenter="buttnShows()" @mouseleave="buttnShow = false" style="width: 5vw;height: 3vh;position: absolute;top:-20px">
                    <button :style="{visibility: buttnShow == false ? 'hidden' : 'visible'}" @click="showTree()">轮播配置</button>
                </div>
                <div class="aside-left-location">
                    <div class="title-container"><div class="title">资产位置</div></div>
                    <div class="location-contour-wrapper">
                        <img src="../assets/ck_img.png" />
                      <!-- <iframe src="/graph/whr/index.html" ref="graphPage" width="100%" :style="{height: (340 / 2160 * 100) + 'vh'}" style="border: none;"></iframe> -->
                        <!--<div v-if="warehouseBase.certFileDTO">
                            <img :src="baseURL + warehouseBase.certFileDTO.relativePath" alt="" />
                        </div>-->
                    </div>
                    <div class="location-details-wrapper">
                        <div class="location-details">
                            <div class="item-lines">
                                <div class="context">园区名称:</div>
                                <div class="value">{{ people_detected_data.entpName ? people_detected_data.entpName : '--' }}</div>
                            </div>
                            <!-- <div class="item-line">
                                <div class="context">货物位置</div>
                                <div class="value">{{ warehouseBase.goodsPosition ? '：' + warehouseBase.goodsPosition : '：' + '--' }}</div>
                            </div>
                            <div class="item-line">
                                <div class="context">地点</div>
                                <div class="value">{{ warehouseBase.address ? warehouseBase.addr ? '：' + warehouseBase.addr + warehouseBase.address : '：' + warehouseBase.address : warehouseBase.addr ? '：' + warehouseBase.addr : '：' + '--' }}</div>
                            </div> -->
                           <!-- <div class="item-line">
                                <div class="context">负责人：</div>
                                <div class="value">{{ warehouseBase.principal ? warehouseBase.principal : '&#45;&#45;'}}</div>
                            </div>
                            <div class="item-line">
                                <div class="context">电话：</div>
                                <div class="value">{{ warehouseBase.phone ? warehouseBase.phone : '&#45;&#45;'}}</div>
                            </div>-->
                        </div>
                    </div>
                </div>
                <div class="aside-right-accumulative-transaction-volume">
                    <div class="title-container"><div class="title">物联感知</div></div>
                    <div class="iot-perception">
                        <el-carousel
                                indicator-position="outside"
                                v-if="!device_total_flag"
                                :interval="dev_carousel_interval"
                                :height="(148/2160*100)+'vh'"
                                arrow="never"
                                :style="{width:(800/3840*100)+'vw', margin: '0 auto'}"
                                style="overflow-y: hidden"
                        >
                            <el-carousel-item style="display: flex;" v-for="(item, index) in dev_count" :key="index">
                                <div class="item-wrapper" v-for="(list, list_index) in item" :key="list_index">
                                    <div class="sensor item">
                                        <!--<div class="status" :class="list.status ? 'normal-status' : 'alert-status'">{{
                                            list.status ? '正常' : '告警' }}
                                        </div>-->
                                        <div class="content">
                                            <div class="img-wrapper"
                                                 :class="list_index === 0 ? 'img-wrapper-0' : list_index === 1 ? 'img-wrapper-1' : list_index === 2 ? 'img-wrapper-2' : ''"
                                            >
                                                <img class="img" :src="list.relativePath" alt=""/>
                                            </div>
                                            <div class="data-wrapper">
                                                <div class="value-unit">
                                                    <div class="value">{{ list.devCount || list.devCount == 0 ?
                                                        list.devCount : '&#45;&#45;' }}
                                                    </div>
                                                    <div class="unit">个</div>
                                                </div>
                                                <div class="name">{{ list.devTypeName ? list.devTypeName : '&#45;&#45;' }}</div>
                                            </div>
                                        </div>
                                        <div class="description-wrapper">
                                            <div class="context">{{ list.context_0 ? list.context_0 + '：' : '' }}</div>
                                            <div class="value">{{ list.value_0 ? list.value_0 : '' }}</div>
                                        </div>
                                        <div class="description-wrapper">
                                            <div class="context">{{ list.context_1 ? list.context_1 + '：' : '' }}</div>
                                            <div class="value">{{ list.value_1 ? list.value_0 : '' }}</div>
                                        </div>
                                    </div>
                                </div>
                            </el-carousel-item>
                        </el-carousel>
                        <div v-if="device_total_flag" class="no-data-wrapper">
                            <div class="img-wrapper"><img src="../assets/icon_nodata.png" alt=""/></div>
                            <div class="no-data-title">暂无数据</div>
                        </div>
                    </div>
                    <!--<div class="title">人员监控</div>
                    <div class="monitor-wrapper personal-monitor">
                        <div v-if="!personal_monitor_flag">
                            <div class="content-img-wrapper">
                                <img src="../assets/bk_face.png" alt=""/>
                            </div>
                            <div class="content-data-wrapper">
                                <div class="item-line-content">
                                    <div class="context">目标：</div>
                                    <div class="value">{{ personal_monitor.target }}</div>
                                </div>
                                <div class="item-line-content">
                                    <div class="context">行为：</div>
                                    <div class="value">{{ personal_monitor.behavior }}</div>
                                </div>
                                <div class="item-line-content">
                                    <div class="context">特征：</div>
                                    <div class="value">{{ personal_monitor.feature }}</div>
                                </div>
                                <div class="status" :class="personal_monitor.status ? 'safe-status' : 'alert-status'">{{
                                    personal_monitor.status ? '安全' : '告警' }}
                                </div>
                            </div>
                        </div>
                        <div v-if="personal_monitor_flag" class="no-data-wrapper">
                            <div class="img-wrapper"><img src="../assets/icon_nodata.png" /></div>
                            <div class="no-data-title">暂无数据</div>
                        </div>
                    </div>
                    <div class="title">车辆监控</div>
                    <div class="monitor-wrapper cars-monitor">
                        <div v-if="!cars_monitor_flag">
                            <div class="content-img-wrapper">
                                <img src="../assets/car-img.png" alt=""/>
                            </div>
                            <div class="content-data-wrapper">
                                <div class="item-line-content">
                                    <div class="context">车牌：</div>
                                    <div class="value">{{ cars_monitor.license_plate }}</div>
                                </div>
                                <div class="item-line-content">
                                    <div class="context">行为：</div>
                                    <div class="value">{{ cars_monitor.behavior }}</div>
                                </div>
                                <div class="item-line-content">
                                    <div class="context">特征：</div>
                                    <div class="value">{{ cars_monitor.feature }}</div>
                                </div>
                                <div class="status" :class="cars_monitor.status ? 'safe-status' : 'alert-status'">{{
                                    cars_monitor.status ? '安全' : '告警' }}
                                </div>
                            </div>
                        </div>
                        <div v-if="cars_monitor_flag" class="no-data-wrapper">
                            <div class="img-wrapper"><img src="../assets/icon_nodata.png" /></div>
                            <div class="no-data-title">暂无数据</div>
                        </div>
                    </div>-->
                </div>
                <div class="aside-left-duty-officer">
                    <div class="title-container"><div class="title">值班人员</div></div>
                    <div class="peopleStatistics" v-if="!personal_monitor_flag">
                        <el-carousel
                                indicator-position="outside"
                                :interval="dev_carousel_interval"
                                :indicator-position="none"
                                :height="(50/2160*100)+'vh'"
                                arrow="never"
                                :style="{width: (850/3840*100)+'vw', margin: '0 auto'}"
                                style="overflow-y: hidden"
                        >
                            <el-carousel-item style="display: flex;" v-for="(item, index) in personal_monitor" :key="index">
                               <span class="item" v-for="(list, list_index) in item" :key="list_index">
                                    <div class="img-wrapper">
								        <img src="../assets/work_people.svg" alt=""/>
							        </div>
                                    {{list.roleName }}<span> {{ list.number}}</span>人
                                </span>
                            </el-carousel-item>
                        </el-carousel>
                    </div>
                    <div class="monitor-wrapper personal-monitor" v-if="refresh_">
                        <div v-if="!websocket_flag">
                             <div :class="!personal_monitor_flag ? 'people-detected-data-wrapper container-item' : 'people-detected-data-wrapper_true container-item'">
                                 <div class="people-detected-data">
                                     <div class="people-detected-compare acquire-images">
                                         <!-- <div class="people-detected-title-wrapper"><div class="people-detected-title">采集图像</div></div> -->
                                         <div class="people-image-wrapper">
                                             <!-- <div class="image-wrapper"> -->
                                                 <!-- <img class="people-img" :src="baseURL + people_detected_data.snapPicPath"/>-->
                                                 <!-- <img class="people-img" :src="baseURL + people_detected_data.intrude_img" :onerror="errorGoodsImg"/>-->
                                                 <!-- <img class="people-img" v-if="people_detected_data.intrude_img != null" :src="baseURL + people_detected_data.intrude_img" />
                                                 <img class="people-img" v-if="people_detected_data.intrude_img == null"  src="../assets/bk_face.png" /> -->
                                                 <!--<div class="bk-face" v-if="people_detected_data.intrude_img == null">
                                                 </div>-->

                                             <!-- </div> -->
                                         </div>
                                         <div class="people-detected-info-wrapper" >
                                             <div class="people-detected-info-title">时间：{{ people_detected_data.createTime ?　people_detected_data.createTime : '--' }}</div>
                                             <div class="daka-wraer" v-if="!websocket_flag_state">
                                                 打卡
                                             </div>
                                             <div class="moshengren-wraer" v-if="websocket_flag_state">
                                                 陌生人
                                             </div>
                                             <div class="people-detected-info-data">
                                                 <div class="people-detected-info">
                                                     <div class="people-detected-info-item">
                                                         <div class="item-key">特征</div>
                                                         <div class="item-value"><span style="color:rgba(73, 195, 253, 1);">：</span>{{ people_detected_data.byMask ? people_detected_data.byMask : '' }}, {{ people_detected_data.byGlasses ?　people_detected_data.byGlasses : '' }},{{ people_detected_data.bySmile ?　people_detected_data.bySmile : '' }}</div>
                                                     </div>
                                                     <!--<div class="people-detected-info-item">
                                                         <div class="item-key">进出类型：</div>
                                                         <div class="item-value">{{ people_detected_data.enter_exit_type ? people_detected_data.enter_exit_type : '&#45;&#45;' }}</div>
                                                     </div>-->
                                                     <div class="people-detected-info-item">
                                                         <div class="item-key">地点</div>
                                                         <div class="item-value"><span style="color:rgba(73, 195, 253, 1);">：</span>{{ people_detected_data.deployName ? people_detected_data.deployName : '--' }}</div>
                                                     </div>
                                                     <div class="people-detected-info-item">
                                                         <div class="item-key">设备</div>
                                                         <div class="item-value"><span style="color:rgba(73, 195, 253, 1);">：</span>{{ people_detected_data.deviceName ? people_detected_data.deviceName : '--' }}</div>
                                                     </div>
                                                 </div>
                                             </div>
                                         </div>
                                     </div>
                                     <div class="contrast-fit">
                                         <div class="contrast-fit-wrapper">
                                             <div class="contrast-fit-data">
                                                 <div class="energy-tank-wrapper">
                                                     <div class="energy-tank normal-energy-tank" :style="{ width: people_detected_data.similarity * 100 + '%' }">
                                                         <div class="energy-tank-item">
                                                             <!--<img v-if="people_detected_data.similarity > '0.98'" src="../../src/assets/energy_tank.png" />-->
                                                             <img src="../../src/assets/energy_tank_abnormal.png" />
                                                         </div>
                                                     </div>
                                                 </div>
                                                 <div class="contrast-fit-value-item">
                                                     <!--												<div class="contrast-fit-context">对比吻合度</div>-->
                                                     <div class="contrast-fit-value">{{ (people_detected_data.similarity * 100).toFixed(0) }}%</div>
                                                 </div>
                                             </div>
                                         </div>
                                     </div>
                                     <div class="people-detected-compare local-database">
                                         <!-- <div class="people-detected-title-wrapper"><div class="people-detected-title">本地数据库</div></div> -->
                                         <div class="people-image-wrapper">
                                             <!-- <div class="image-wrapper"> -->
                                                 <!-- <img class="people-img" :src="baseURL + people_detected_data.paceBoxFacePath"/>-->
                                                 <!-- <img class="people-img" :src="baseURL + people_detected_data.local_img" :onerror="errorGoodsImg"/>-->
                                                 <!-- <img class="people-img" v-if="people_detected_data.local_img != null" :src="baseURL + people_detected_data.local_img" /> -->
                                                 <!-- <img v-if="people_detected_data.local_img == null" class="people-img"  src="../assets/bk_face.png" /> -->
                                                 <!--<div class="bk-face" v-if="people_detected_data.local_img == null">
                                                 </div>-->
                                             <!-- </div> -->
                                         </div>
                                         <div class="people-detected-info-wrapper">
                                             <div class="people-detected-info-title">图像比对</div>
                                             <div class="people-detected-info-data">
                                                 <div class="people-detected-info">
                                                     <div class="people-detected-info-item">
                                                         <div class="item-key">人像库</div>
                                                         <div class="item-value"><span style="color:rgba(73, 195, 253, 1);">：</span>{{ people_detected_data.faceBox ? people_detected_data.faceBox : '--' }}</div>
                                                     </div>
                                                     <div class="people-detected-info-item">
                                                         <div class="item-key">姓名</div>
                                                         <div class="item-value"><span style="color:rgba(73, 195, 253, 1);">：</span>{{ people_detected_data.userName ?　people_detected_data.userName : '--' }}</div>
                                                     </div>
                                                     <div class="people-detected-info-item">
                                                         <div class="item-key">职务</div>
                                                         <div class="item-value"><span style="color:rgba(73, 195, 253, 1);">：</span>{{ people_detected_data.jobTitle ? people_detected_data.jobTitle : '--' }}</div>
                                                     </div>
                                                     <div class="people-detected-info-item">
                                                         <div class="item-key">电话</div>
                                                         <div class="item-value"><span style="color:rgba(73, 195, 253, 1);">：</span>{{ people_detected_data.phone | filter_phone_desensitized }}</div>
                                                     </div>

                                                     <div class="people-detected-info-item">
                                                         <div class="item-key">证件号</div>
                                                         <div class="item-value"><span style="color:rgba(73, 195, 253, 1);">：</span>{{ people_detected_data.cardNo | filter_id_card_desensitized }}</div>
                                                     </div>
                                                     <div class="people-detected-info-item">
                                                         <div class="item-key">企业</div>
                                                         <div class="item-value"><span style="color:rgba(73, 195, 253, 1);">：</span>{{ people_detected_data.entpName ? people_detected_data.entpName : '--' }}</div>
                                                     </div>
                                                 </div>
                                             </div>
                                         </div>
                                     </div>
                                 </div>
                             </div>
                        </div>
                        <!--<div v-if="websocket_flag" class="no-data-wrapper">
                            <div class="img-wrapper"><img src="../assets/icon_nodata.png" /></div>
                            <div class="no-data-title">暂无数据</div>
                        </div>-->
                    </div>
                </div>

                <div class="aside-left-inspection-event">
                    <div class="title-container"><div class="title">巡检事件</div></div>
                    <div class="monitor-wrapper cars-monitor">
                        <div class="img_gaojing" v-if="jinggao">
                            <img src="../assets/jinggao.svg" />
                        </div>
                        <el-carousel
                                indicator-position="outside"
                                v-if="!inspectionEvent_flag"
                                :interval="dev_inspectionEvent_interval"
                                :height="(202/2160*100)+'vh'"
                                :indicator-position="none"
                                arrow="never"
                                :style="{width: (800/3840*100)+'vw',margin: '0 auto'}"
                                style="overflow-y: hidden;"
                        >
                            <el-carousel-item style="display: flex;" v-for="(item, index) in inspectionEventList" :key="index">
                                <div>

                                    <div class="content-data-wrapper">
                                        <div class="item-line-content">
                                            <div class="title-value value" :style="{fontSize: (35/3840*100)+'vw',marginBottom: (27/2160*100) + 'vh'}">{{ item.checkContent != null ? item.checkContent : item.orderName != null ? item.orderName : '' }}</div>
                                        </div>
                                        <div class="item-line-content">
                                            <div class="context">最近上报时间:</div>
                                            <div class="value">{{ item.latestCheckTime != null ? item.latestCheckTime : item.createTime != null ? item.createTime : '' }}</div>
                                        </div>
                                        <div class="status" :class="item.checkStatus == 0 ? 'safe-status' : 'alert-status'">{{
                                            item.checkStatus != null ? item.checkStatus == 0 ? '正常' : '告警' : '告警' }}
                                        </div>
                                    </div>
                                </div>
                            </el-carousel-item>
                        </el-carousel>
                        <div v-if="inspectionEvent_flag" class="no-data-wrapper">
                            <div class="img-wrapper"><img src="../assets/icon_nodata.png" /></div>
                            <div class="no-data-title">暂无数据</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="content-main">
                <div class="content-main-asset-data">
                    <div class="item-content-wrapper">
                        <div class="item-content-line-1">
                            <div class="item-content">
                                <div class="context">仓单编号：</div>
                                <div class="value">{{ whrBase.whrId ? whrBase.whrId : '--' }}</div>
                            </div>
                            <div class="item-content">
                                <div class="context">持有人：</div>
                                <div class="value">{{ whrBase.ownerName ? whrBase.ownerName : '--' }}</div>
                            </div>
                        </div>
                        <div class="item-content-line-1">
                            <div class="item-content">
                                <div class="context">抵质押率：</div>
                                <div class="value">{{ whrBase.mortgageRate ? whrBase.mortgageRate : '--' }}</div>
                            </div>
                            <div class="item-content">
                                <div class="context">资金方：</div>
                                <div class="value">{{ whrBase.fundName ? whrBase.fundName : '--' }}</div>
                            </div>
                        </div>
                        
                    </div>
                </div>

                <div class="content-main-transaction-dynamic">
                    <div class="monitor-video-wrapper">
                        <div class="top-list">
                            <div class="top-head">
                                <div class="top-item">货物种类</div>
                                <div class="top-item">在仓货物数量(套/吨)</div>
                                <div class="top-item">货物估值(万元)</div>
                                <div class="top-item">融资金额(万元)</div>
                                <div class="top-item">期限</div>
                            </div>
                            <div class="top-body">
                            <div :key="index" class="line" v-for="(row, index) in tableList">
                                <div class="line-item">{{ row.types }}</div>
                                <div class="line-item">{{ row.inWarehouseNum }}</div>
                                <div class="line-item">{{ row.valuation }}</div>
                                <div class="line-item">{{ row.financingAmount }}</div>
                                <div class="line-item">{{ row.term }}</div>
                            </div>
                            </div>
                        </div>
                        <!-- <div class="border-base-0"></div>
                        <div class="border-base-1"></div>
                        <div class="border-base-2"></div>
                        <div class="video">
                            <div v-show="playerVisible" :key="playerVisible" class="video-wrapper">
                                <div class="video-content">
                                    <div class="video-title" v-show="false">
                                        <span v-text="playerData.devName"></span>
                                        <div @click="closePlayer()" class="video-close">
                                        </div>
                                    </div>
                                    <video class="demo-video" width="100%" :style="{height:(700/2160*100)+'vh',width: 32.8 + 'vw' }" controls ref="player" muted autoplay></video>
                                </div>
                            </div>
                            <el-carousel
                                indicator-position="outside"
                                :style="{width: (1260/3840*100)+'vw'}"
                                style="position: absolute"
                                arrow="never"
                                @change="changeSource"
                                :interval="video_carousel_interval"
                                :height="(45/2160*100)+'vh'">
                                <el-carousel-item v-for="(item, index) in camera_video_list" :key="index"></el-carousel-item>
                            </el-carousel>
                        </div> -->
                    </div>
                </div>
                <div class="content-main-transaction-up-chain">
                    <div class="transaction-up-chain">
                        <div class="block-height-contract-calls">
                            <div class="block-height">
                                <div class="context">区块高度</div>
                                <div v-if="parseFloat(block_height).toString() !== 'NaN'">
                                    <div class="value" id="block_height_numScroll"></div>
                                </div>
                                <div v-else>
                                    <div class="value">{{ block_height }}</div>
                                </div>
                            </div>
                            <div class="contract-calls">
                                <div class="context" >智能合约调用次数</div>
                                <div v-if="parseFloat(contract_calls).toString() !== 'NaN'" class="value" id="contract_calls_numScroll"></div>
                                <div v-else class="value" style="color: #FFF;">{{ contract_calls }}</div>
                                <!--<div v-if="parseFloat(contract_calls).toString() !== 'NaN'" class="digital-bg-img">
                                    <img v-for="i in 7" src="../assets/number_origin.png" alt=""/>
                                </div>-->
                            </div>
                        </div>
                        <div class="transaction-up-chain-wrapper">
                            <div class="content-item-wrapper">
                                <div class="content-item-container" v-if="isReloadData"
                                     :style="{ transform: 'translate(' + block_chain_move_distance + 'vw' + ')' }"
                                >
                                    <div class="content-item"
                                         v-for="(item, index) in block_chain_data_blockItem.slice()"
                                         :key="index" :class="index == block_chain_index ? 'block-item-flag' : ''"
                                         v-if="isReloadData">
                                        <div class="block-height-key">区块高度</div>
                                        <div class="block-height-value">{{ item.height | filter_thousand_add }}</div>
                                        <div class="up-chain-number-key">上链编号</div>
                                        <div class="up-chain-number-value">{{ item.chainNo ? item.chainNo : '--' }}</div>
                                        <div class="img-wrapper">
                                            <img class="block-chain-img" src="../assets/icon_qukuai@2x.png" alt=""/>
                                            <div class="img-arrow-wrapper" v-show="index == block_chain_index ? false : true " v-if="index !== 0 && index != block_chain_index-6">
                                                <img class="img-arrow opacity-icon-arrow opacity-icon-arrow-1"
                                                     src="../assets/icon_arrow@2x.png" alt=""/>
                                                <img class="img-arrow opacity-icon-arrow opacity-icon-arrow-2"
                                                     src="../assets/icon_arrow@2x.png" alt=""/>
                                                <img class="img-arrow opacity-icon-arrow opacity-icon-arrow-3"
                                                     src="../assets/icon_arrow@2x.png" alt=""/>
                                            </div>
                                        </div>
                                        <div class="type-title">{{ item.title ? item.title : '--' }}</div>
                                        <div class="type-number">{{ item.subhead ? item.subhead : '--' }}</div>
                                    </div>
                                    <div v-if="block_chain_data_blockItem_flag" class="no-data-wrapper">
                                        <div class="img-wrapper"><img src="../assets/icon_nodata.png" /></div>
                                        <div class="no-data-title">暂无数据</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="aside-right">
                <div class="aside-left-financing-transaction">
                    <div class="title-container"><div class="title">库区坐标</div></div>
                    <div class="financing-transaction-wrapper">
                        <div class="financing-transaction" style="text-align: center;">
                            <img :src="imgUrl" alt="">
                            <!-- <div class="item-line-content">
                                <div class="context-left">
                                    <div class="context merge">上游交易方</div>
                                    <div class="value">{{ whrBase.upstreamSeller ? '：'+whrBase.upstreamSeller : '：' + '--'}}</div>
                                </div>
                                <div class="status" :class="entpFinapplyBasic.depositorStatus ? 'alert' : 'safe'">{{ entpFinapplyBasic.depositorStatus ? '告警' : '安全'}}</div>
                             </div> 
                            <div class="item-line-content">
                                <div class="context-left">
                                    <div class="context merge">下游交易方</div>
                                    <div class="value">{{ whrBase.downstreamBuyer ? '：' + whrBase.downstreamBuyer : '：' + '--'}}</div>
                                </div>
                                <div class="status" :class="entpFinapplyBasic.fundStatus ? 'alert' : 'safe'">{{ entpFinapplyBasic.fundStatus ? '告警' : '安全'}}</div>
                            </div>
                            <div class="item-line-content-left-right">
                                <div class="item-line-content special">
                                    <div class="context merge">货值</div>
                                    <div class="value">{{ whrBase.remainValue ? '：' + whrBase.remainValue + '万' : '：' + '--'}}</div>
                                </div>
                                <div class="item-line-content">
                                    <div class="context merge">存储期限</div>
                                    <div class="value">{{ whrBase.storagePeriod ? '：' + whrBase.storagePeriod : '：' + '--' }}
                                    </div>
                                </div>
                            </div>
                            <div class="item-line-content">
                                <div class="context time">预计存储时间</div>
                                <div class="value">{{ whrBase.importTimeStr ? '：' + whrBase.importTimeStr + '至' + whrBase.expireTimeStr : '：' + '--' }}</div>
                            </div> -->
                        </div>
                    </div>
                </div>
                <div class="aside-right-transaction-volume-growth">
                    <!--<div class="title">{{ whrBase.categoryName ? whrBase.categoryName : '&#45;&#45;' }} · 价格走势</div>-->
                    <div class="title-container"><div class="title">价格走势</div></div>
                    <div class="chart" v-if="price_trend_flag">
                        <goods_price_trend_chart :chartData="price_trend_data"></goods_price_trend_chart>
                    </div>
                    <div v-else class="no-data-wrapper">
                        <div class="img-wrapper"><img src="../assets/icon_nodata.png" /></div>
                        <div class="no-data-title">暂无数据</div>
                    </div>
                </div>
                <!--<div class="aside-right-accumulative-transaction-volume">
                    <div class="title">人员监控</div>
                    <div class="monitor-wrapper personal-monitor">
                        <div v-if="!personal_monitor_flag">
                            <div class="content-img-wrapper">
                                <img src="../assets/bk_face.png" alt=""/>
                            </div>
                            <div class="content-data-wrapper">
                                <div class="item-line-content">
                                    <div class="context">目标：</div>
                                    <div class="value">{{ personal_monitor.target }}</div>
                                </div>
                                <div class="item-line-content">
                                    <div class="context">行为：</div>
                                    <div class="value">{{ personal_monitor.behavior }}</div>
                                </div>
                                <div class="item-line-content">
                                    <div class="context">特征：</div>
                                    <div class="value">{{ personal_monitor.feature }}</div>
                                </div>
                                <div class="status" :class="personal_monitor.status ? 'safe-status' : 'alert-status'">{{
                                    personal_monitor.status ? '安全' : '告警' }}
                                </div>
                            </div>
                        </div>
                        <div v-if="personal_monitor_flag" class="no-data-wrapper">
                            <div class="img-wrapper"><img src="../assets/icon_nodata.png" /></div>
                            <div class="no-data-title">暂无数据</div>
                        </div>
                    </div>
                    <div class="title">车辆监控</div>
                    <div class="monitor-wrapper cars-monitor">
                        <div v-if="!cars_monitor_flag">
                            <div class="content-img-wrapper">
                                <img src="../assets/car-img.png" alt=""/>
                            </div>
                            <div class="content-data-wrapper">
                                <div class="item-line-content">
                                    <div class="context">车牌：</div>
                                    <div class="value">{{ cars_monitor.license_plate }}</div>
                                </div>
                                <div class="item-line-content">
                                    <div class="context">行为：</div>
                                    <div class="value">{{ cars_monitor.behavior }}</div>
                                </div>
                                <div class="item-line-content">
                                    <div class="context">特征：</div>
                                    <div class="value">{{ cars_monitor.feature }}</div>
                                </div>
                                <div class="status" :class="cars_monitor.status ? 'safe-status' : 'alert-status'">{{
                                    cars_monitor.status ? '安全' : '告警' }}
                                </div>
                            </div>
                        </div>
                        <div v-if="cars_monitor_flag" class="no-data-wrapper">
                            <div class="img-wrapper"><img src="../assets/icon_nodata.png" /></div>
                            <div class="no-data-title">暂无数据</div>
                        </div>
                    </div>
                    <div class="title">物联感知</div>
                    <div class="iot-perception">
                        <el-carousel
                                indicator-position="outside"
                                v-if="!device_total_flag"
                                :interval="dev_carousel_interval"
                                height="245px"
                                arrow="never"
                                style="width: 800px;margin: 0 auto;overflow-y: hidden;"
                        >
                            <el-carousel-item style="display: flex;" v-for="(item, index) in dev_count" :key="index">
                                <div class="item-wrapper" v-for="(list, list_index) in item" :key="list_index">
                                    <div class="sensor item">
                                        <div class="status" :class="list.status ? 'normal-status' : 'alert-status'">{{
                                            list.status ? '正常' : '告警' }}
                                        </div>
                                        <div class="content">
                                            <div class="img-wrapper"
                                                 :class="list_index === 0 ? 'img-wrapper-0' : list_index === 1 ? 'img-wrapper-1' : list_index === 2 ? 'img-wrapper-2' : ''"
                                            >
                                                <img class="img" :src="baseURL + list.relativePath" alt=""/>
                                            </div>
                                            <div class="data-wrapper">
                                                <div class="value-unit">
                                                    <div class="value">{{ list.devCount || list.devCount == 0 ?
                                                        list.devCount : '&#45;&#45;' }}
                                                    </div>
                                                    <div class="unit">个</div>
                                                </div>
                                                <div class="name">{{ list.devTypeName ? list.devTypeName : '&#45;&#45;' }}</div>
                                            </div>
                                        </div>
                                        <div class="description-wrapper">
                                            <div class="context">{{ list.context_0 ? list.context_0 + '：' : '' }}</div>
                                            <div class="value">{{ list.value_0 ? list.value_0 : '' }}</div>
                                        </div>
                                        <div class="description-wrapper">
                                            <div class="context">{{ list.context_1 ? list.context_1 + '：' : '' }}</div>
                                            <div class="value">{{ list.value_1 ? list.value_0 : '' }}</div>
                                        </div>
                                    </div>
                                </div>
                            </el-carousel-item>
                        </el-carousel>
                        <div v-if="device_total_flag" class="no-data-wrapper">
                            <div class="img-wrapper"><img src="../assets/icon_nodata.png" alt=""/></div>
                            <div class="no-data-title">暂无数据</div>
                        </div>
                    </div>
                </div>-->
               <!-- <div class="aside-right-operation-status">
                    <div class="title">运营情况</div>
                    <div class="content-wrapper">
                        <div class="context">日报
                            <div class="value">{{ operationStatusInformationDailyCount ? operationStatusInformationDailyCount : '&#45;&#45;' }}</div>
                            个
                        </div>
                        <div class="linear-block-img">
                            <img src="../assets/parting_line@2x.png" alt=""/>
                        </div>
                        <div class="content-data" v-if="!monitor_event_count_flag">
                            <div class="left-content">
                                <div class="context">告警</div>
                                <div class="value-unit">
                                    <div v-if="!monitor_event_count_flag">
                                        <div class="value">{{ monitor_event_count[0].allEvenetCount }}</div>
                                    </div>
                                    <div v-else>
                                        <div class="value"> &#45;&#45; </div>
                                    </div>
                                    <div class="unit">个</div>
                                </div>
                            </div>
                            <div class="right-content">
                                <div class="item-wrapper" v-for="(value, index) in monitor_event_count.slice(-3)"
                                     :key="index">
                                    <div class="item">
                                        <div class="img-wrapper">
                                            <div
                                                    class="line-img"
                                                    :class="[Object.keys(value)[0] === 'eventNewCount' ? 'new' : Object.keys(value)[0] === 'eventDisposeCount' ? 'handing' : Object.keys(value)[0] === 'eventCloseCount' ? 'closed' : '']"
                                            >
                                                <div
                                                        class="line-img-item"
                                                        :class="[Object.keys(value)[0] === 'eventNewCount' ? 'new' : Object.keys(value)[0] === 'eventDisposeCount' ? 'handing' : Object.keys(value)[0] === 'eventCloseCount' ? 'closed' : '']"
                                                        v-for="n in 16"
                                                        :key="n"
                                                ></div>
                                            </div>
                                        </div>
                                        <div
                                                class="data-wrapper"
                                                :class="[Object.keys(value)[0] === 'eventNewCount' ? 'new' : Object.keys(value)[0] === 'eventDisposeCount' ? 'handing' : Object.keys(value)[0] === 'eventCloseCount' ? 'closed' : '']"
                                        >
                                            <div class="value-unit">
                                                <div class="value">{{ Object.values(value)[0] || Object.values(value)[0]
                                                    === 0 ? Object.values(value)[0] : '&#45;&#45;' }}
                                                </div>
                                                <div class="unit">个</div>
                                            </div>
                                            <div class="name">{{ Object.keys(value)[0] === 'eventNewCount' ? '新产生' :
                                                Object.keys(value)[0] === 'eventDisposeCount' ? '处理中' :
                                                Object.keys(value)[0] === 'eventCloseCount' ? '已关闭' : '' }}
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div v-if="monitor_event_count_flag" class="no-data-wrapper">
                            <div class="img-wrapper"><img src="../assets/icon_nodata.png" alt=""/></div>
                            <div class="no-data-title">暂无数据</div>
                        </div>
                        <div class="linear-block-img">
                            <img src="../assets/parting_line@2x.png" alt=""/>
                        </div>
                        <div class="content-data" v-if="!monitor_workorder_count_flag">
                            <div class="left-content">
                                <div class="context">工单</div>
                                <div class="value-unit">
                                    <div v-if="!monitor_workorder_count_flag">
                                        <div class="value">{{ monitor_workorder_count[0].allOrderCount ? monitor_workorder_count[0].allOrderCount : '&#45;&#45;' }}</div>
                                    </div>
                                    <div class="unit">个</div>
                                </div>
                            </div>
                            <div class="right-content">
                                <div class="item-wrapper" v-for="(value, index) in monitor_workorder_count.slice(-3)"
                                     :key="index">
                                    <div class="item">
                                        <div class="img-wrapper">
                                            <div
                                                    class="line-img"
                                                    :class="[Object.keys(value)[0] === 'orderNewCount' ? 'new' : Object.keys(value)[0] === 'orderDisposeCount' ? 'handing' : Object.keys(value)[0] === 'orderCloseCount' ? 'closed' : '']"
                                            >
                                                <div
                                                        class="line-img-item"
                                                        :class="[Object.keys(value)[0] === 'orderNewCount' ? 'new' : Object.keys(value)[0] === 'orderDisposeCount' ? 'handing' : Object.keys(value)[0] === 'orderCloseCount' ? 'closed' : '']"
                                                        v-for="n in 16"
                                                        :key="n"
                                                ></div>
                                            </div>
                                        </div>
                                        <div
                                                class="data-wrapper"
                                                :class="[Object.keys(value)[0] === 'orderNewCount' ? 'new' : Object.keys(value)[0] === 'orderDisposeCount' ? 'handing' : Object.keys(value)[0] === 'orderCloseCount' ? 'closed' : '']"
                                        >
                                            <div class="value-unit">
                                                <div class="value">{{ Object.values(value)[0] || Object.values(value)[0]
                                                    === 0 ? Object.values(value)[0] : '&#45;&#45;' }}
                                                </div>
                                                <div class="unit">个</div>
                                            </div>
                                            <div class="name">{{ Object.keys(value)[0] === 'orderNewCount' ? '新产生' :
                                                Object.keys(value)[0] === 'orderDisposeCount' ? '处理中' :
                                                Object.keys(value)[0] === 'orderCloseCount' ? '已关闭' : '' }}
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div v-if="monitor_workorder_count_flag" class="no-data-wrapper">
                            <div class="img-wrapper"><img src="../assets/icon_nodata.png" alt=""/></div>
                            <div class="no-data-title">暂无数据</div>
                        </div>
                        <div class="linear-block-img">
                            <img src="../assets/parting_line@2x.png" alt=""/>
                        </div>
                    </div>
                </div>-->
                <div class="aside-left-warehouse-receipt-evaluation">
                    <div class="title-container"><div class="title">仓单评价</div></div>
                    <div class="content" v-if="radar_update">
                        <warehouse_receipt_evaluation :chartData="radar_chart_data"></warehouse_receipt_evaluation>
                    </div>
                    <div v-else class="no-data-wrapper">
                        <div class="img-wrapper"><img src="../assets/icon_nodata.png" /></div>
                        <div class="no-data-title">暂无数据</div>
                    </div>
                </div>
            </div>
        </div>

        <div class="dialog-wrapper" v-if="dialog_show">
            <div class="dialog">
                <div class="title">登录</div>
                <el-form :model="form" :rules="rules" ref="form" style="top: 50%;">
                    <el-form-item label="账号" prop="username" :label-width="formLabelWidth">
                        <el-input placeholder="请输入账号" v-model="form.username" clearable>
                        </el-input>
                    </el-form-item>
                    <el-form-item label="密码" prop="password" :label-width="formLabelWidth">
                        <el-input placeholder="请输入密码" v-model="form.password" show-password></el-input>
                    </el-form-item>
                </el-form>
                <div class="button-wrapper">
                    <el-button type="primary" @click="login('form')">确 定</el-button>
                </div>
            </div>
        </div>

    </div>
</template>

<script>
    import Warehouse_receipt_evaluation from "../components/warehouse_receipt_evaluation";
    import Warehouse_tree from "../components/warehouse_tree";
    import Vue from 'vue';
    import Hls from 'hls.js';

    import ElementUI from 'element-ui';
    import 'element-ui/lib/theme-chalk/index.css';

    import CountUp from "countup";
    import Goods_price_trend_chart from "../components/goods_price_trend_chart";
    import request from "../../src/lib/request";
    import axios from 'axios'

    import SockJS from 'sockjs-client';
    import Stomp from 'stompjs';
    import flvjs from 'flv.js';

    import md5 from 'js-md5';
    Vue.prototype.$md5 = md5;

    Vue.use(ElementUI);

    export default {
        name: "index",
        inject: ['reload'],
        data() {
            let checkUsername = (rule, value, callback) => {
                if (!value) {
                    return callback(new Error('用户名不能为空'));
                } else {
                    if (this.form.username.length < 5) {
                        return callback(new Error('用户名长度不足5位!'));
                    } else {
                        callback();
                    }
                }
            };
            let checkPassword = (rule, value, callback) => {
                if (!value) {
                    return callback(new Error('密码不能为空'));
                } else {
                    if (this.form.password.length < 5) {
                        return callback(new Error('密码长度不足5位!'));
                    } else {
                        callback();
                    }
                }
            };
            return {
                buttnShow:false,
                none:'none',
                checkType:4,
                whId:467662387358945,
                whrId: 386041199847470,
                current_data: '',
                inspectionEventList:[],
                inspectionEvent_flag:true,
                jinggao:false,
                websocket_flag:true,
                page:1,
                tableList:[],
                imgUrl:require('../assets/ck_img.png'),
                dataCollection:{
                    snapFacePicPath:'',
                    picSnapTime:'',
                    dutySystem:'',
                    deployName:'',
                    deviceName:'',
                    byMask:'',
                    bySmile:'',
                    byGlasses:''
                },
                localData:{
                    similarity:'',
                    paceBoxFacePath:'',
                    faceBox:'',
                    userName:'',
                    jobTitle:'',
                    phone:'',
                    cardNo:'',
                    entpName:''
                },

                whrList:[],
                block_height: '--',
                contract_calls: 1324,

                whList:[],
                wrhListInterval:null,
                warehouseBase: {},
                whrBase: {},
                entpFinapplyBasic: {},

                radar_update: false,
                radar_chart_data: [],
                price_trend_data: [],
                price_trend_flag: false,
                goods_category_name: '',

                video_carousel_interval: 1000 * 60 * 2,
                camera_video_list: [],
                camera_video_list_flag: true,
                carList: [], //用来控制播放
                id: '1',
                rtsp: 'rtsp://wowzaec2demo.streamlock.net/vod/mp4:BigBuckBunny_115k.mov',
                player: null,
                camera_video_list_index: 0,

                block_chain_data_blockItem: [],
                block_chain_data_blockItem_flag: true,
                block_chain_index: 5,
                websocket_block_chain_data: {
                    height: '84340',
                    txHash: 'rgerg534543',
                    storageDesc: ['fjewifj', 'fjioewjfoweojfi']
                },
                isReloadData: true, // 刷新标识
                block_chain_move_distance: 0,
                funcBlock:null,
                personal_monitor: [],
                personal_monitor_flag: false,
                cars_monitor: {
                    img_path: '../assets/car-img.png',
                    license_plate: '京Y015786',
                    behavior: '出库',
                    feature: '蓝色 / 运输车辆',
                    status: 0
                },
                cars_monitor_flag: true,
                playerVisible: true,
                playerData: {
                    devName: '',
                    deployName: '',
                    palyUrl: ''
                },
                flv_: null,
                hls_: null,

                // baseURL: 'https://cwh.bzbhct.com:10804', // 接口的域名地址
                baseURL: window.PLATFROM_CONFIG.baseUrl, // 接口的域名地址
                dev_carousel_interval: 150000,
                dev_inspectionEvent_interval: 5000,
                dev_count: [],
                device_total_flag: true,

                operationStatusInformationDailyCount: 0,
                monitor_event_count: [],
                monitor_event_count_flag: true,
                monitor_workorder_count: [],
                monitor_workorder_count_flag: true,

                dialog_show: false,
                form: {
                    username: '',
                    password: ''
                },
                rules: {
                    username: [
                        { validator: checkUsername, trigger: 'blur' }
                    ],
                    password: [
                        { validator: checkPassword, trigger: 'blur' }
                    ]
                },
                formLabelWidth: (150/3840*100)+ 'vw',

                entpId: null,
                Authorization: null,

                //轮播配置
                dialogFormAddVisible:false,
                whListInterval:null,
                carousel:null,

                people_detected_data: {},
                websocket_flag_state:false,
                latestFace:null,
                refresh_ : true,
                loginAfterInterval:'',
            }
        },
        mounted() {
            let _this = this
            if (localStorage.getItem('Authorization_token') && localStorage.getItem('entpId') && localStorage.getItem('Authorization')) {
                this.dialog_show = false;
                this.entpId = localStorage.getItem('entpId');
                this.Authorization = localStorage.getItem('Authorization');
                // this.websocketSubscription()
                var isCarouse = JSON.parse(localStorage.getItem('isCarouse'));
                if (isCarouse != null) {
                    if (isCarouse) {
                        console.log('rotation',1)
                        let wareList = JSON.parse(localStorage.getItem('wareList'))
                        this.rotation(wareList)
                    } else {
                        console.log('endCarousel',2)
                        this.endCarousel()
                    }
                } else {
                    console.log('locationInformation',3)
                    this.locationInformation()
                }
                clearInterval(this.loginAfterInterval)
                // this.loginAfterInterval = setInterval(() => {
                    // this.reload()
                // }, 1000 * 60 * 60 * 4);
                // }, 1000 * 15);

                setInterval(() => {
                    location.reload()
                }, 1000 * 60 * 60 * 2.2);
                // }, 1000 * 25);
            } else {
                this.dialog_show = true;
            }

            if (!this.dialog_show) {
                window.onresize = function() {
                    location.reload();
                }
            }

            /**监控是否在当前标签和是否最小化浏览器窗口**/
            document.addEventListener("visibilitychange", function() {
                if (document.hidden) {
                    //已离开当前页面
                    // document.title = "★切换到别的页面去了哟~★"
                    //清除定时
                    // _this.endCarousel()
                    clearInterval(_this.whListInterval);//结束货仓轮播
                    clearInterval(_this.carousel); // 结束库区轮播
                    // clearInterval(this.carousel); // 结束库区轮播
                    clearInterval(_this.wrhListInterval)
                    let reservoirArea = null
                    let warehouseBase = null
                    reservoirArea = JSON.parse(localStorage.getItem('reservoirArea')); //库区
                    warehouseBase = JSON.parse(localStorage.getItem('warehouseBase')); //货仓
                    if (reservoirArea) {
                        _this.warehouseBase.whName = reservoirArea.whName
                    }
                    if (warehouseBase) {
                        _this.warehouseBase.goodsPosition = warehouseBase.goodsPosition
                        _this.whId = warehouseBase.goodsPositionId
                    }

                    clearInterval(_this.funcBlock);
                } else {
                    //返回了当前页面
                    // document.title = "★哈哈,回来了,是咱们项目~★"
                    //开启定时
                    var isCarouse = JSON.parse(localStorage.getItem('isCarouse'));
                    if (isCarouse != null) {
                        if (isCarouse) {
                            let wareList = JSON.parse(localStorage.getItem('wareList'))
                            _this.rotation(wareList)
                        } else {
                            _this.endCarousel()
                        }
                    } else {
                        _this.locationInformation()
                    }

                    /* _this.funcBlock = null;
                    if (_this.block_chain_data_blockItem.length > 6) {
                        _this.funcBlock = setInterval(detected, 3000);
                    } */
                    _this.block_chain_scroll_fun()
                }
            });
        },
        filters: {
            filter_thousand_add(value) {
                if (!value && value != 0) {
                    return '--';
                } else {
                    return (value || 0).toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,');
                }
            },
            filter_event_list_createTime(time) {
                return time.slice(5);
            },
            filter_time_slice(time) {
                return time.slice(0, time.length - 3);
            },
            filter_phone_desensitized(phone) {
                if (!phone || phone == '') {
                    return '--'
                } else if (phone.length <= 7) {
                    return phone;
                } else {
                    // return phone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2');
                    return phone.substr(0, 3) + "****" + phone.substr(7);
                }
            },
            filter_id_card_desensitized(value) {
                if (!value || value == '') {
                    return '--'
                } else {
                    value = value + '';
                    return value.substr(0, 2) + '***' + value.substr(value.length - 3);
                }
            },
        },
        methods: {

            login(formName) {

                let _this = this;

                _this.$refs[formName].validate((valid) => {
                    if (valid) {

                        request('/loginScreen', {
                                username: _this.form.username,
                                password: _this.form.password
                            }).then(res => {

                            let resp = res

                            if (resp.code === 200) {
                                _this.entpId = resp.data.entpId;
                                _this.Authorization = resp.data.token;

                                _this.$message({
                                    message: '登录成功！',
                                    type: 'success'
                                });
                                localStorage.setItem('Authorization_token', _this.Authorization + ',' + _this.entpId);
                                localStorage.setItem('entpId', _this.entpId);
                                localStorage.setItem('Authorization', _this.Authorization);
                                // _this.websocketSubscription()
                                _this.locationInformation()
                                // _this.loginAfterInterval = setInterval(() => {
                                    // this.reload()
                                // }, 1000 * 60 * 60 * 4);
                                setTimeout(() => {
                                    _this.dialog_show = false;
                                    location.reload();
                                }, 512)
                            } else if (resp.code === 401) {
                                this.$message({
                                    message: '会话过期，请重新登录！',
                                    type: 'warning'
                                });
                            } else {
                                _this.$message.error(resp.message);
                            }
                        });
                    } else {
                        return false;
                    }
                });

            },

            websocketSubscription() {
                let _this = this;
                // Websocket
                const socket = new SockJS('/pros-api/screenServer');
                // const socket = new SockJS('https://whr.microger.com:18223/screenServer');
                // const socket = new SockJS('http://localhost:8007/screenServer');
                const stompClient = Stomp.over(socket);
                const headers = {
                    Authorization: this.Authorization,
                    entpId: this.entpId
                };
                stompClient.debug = function(str) {};
                stompClient.connect(
                    headers,
                    () => {
                        stompClient.subscribe('/user/cwhScreen_face/queue/getResponse', response => {
                            if (JSON.parse(response.body).messageType == 8) {
                                let data = JSON.parse(response.body).data
                                if(data.whId == _this.whId){
                                    /*Object.keys(this.dataCollection).forEach((key) => {
                                        if (data[key] != null) {
                                            this.dataCollection[key] = data[key]
                                        } else {
                                            this.dataCollection[key] = ''
                                        }
                                    })*/

                                    /*this.dataCollection.snapFacePicPath=data.snapFacePicPath
                                    this.dataCollection.picSnapTime=data.picSnapTime
                                    this.dataCollection.dutySystem=data.dutySystem
                                    this.dataCollection.deployName=data.deployName
                                    this.dataCollection.deviceName = data.deviceName
                                    this.dataCollection.byMask = data.byMask
                                    this.dataCollection.bySmile = data.bySmile
                                    this.dataCollection.byGlasses = data.byGlasses

                                    this.localData.similarity = data.similarity
                                    this.localData.paceBoxFacePath = data.paceBoxFacePath
                                    this.localData.faceBox = data.faceBox
                                    this.localData.userName = data.userName
                                    this.localData.jobTitle = data.jobTitle
                                    this.localData.phone = data.phone
                                    this.localData.cardNo = data.cardNo
                                    this.localData.entpName = data.entpName*/
                                    /*Object.keys(this.localData).forEach((key) => {
                                        if (data[key] != null) {
                                            this.localData[key] = data[key]
                                        } else {
                                            this.localData[key] = ''
                                        }
                                    })*/
                                    clearTimeout(this.latestFace)
                                    if(data != null){
                                        this.refresh_ = false
                                        _this.people_detected_data = data
                                        if(_this.people_detected_data.certFileDTOS != null){
                                            for (let i = 0; i < _this.people_detected_data.certFileDTOS.length; i++) {
                                                if (_this.people_detected_data.certFileDTOS[i].fileName.indexOf('Stranger_Intrude_blacklistFaceSnap') != -1) {
                                                    _this.people_detected_data.local_img = _this.people_detected_data.certFileDTOS[i].relativePath;
                                                }
                                                if (_this.people_detected_data.certFileDTOS[i].fileName.indexOf('Stranger_Intrude_faceSnap') != -1) {
                                                    _this.people_detected_data.intrude_img = _this.people_detected_data.certFileDTOS[i].relativePath;
                                                }
                                            }
                                        }
                                        this.websocket_flag = false
                                        this.$nextTick(() =>{
                                            this.refresh_ = true
                                        })
                                        if(this.people_detected_data.status == 1){//打卡
                                            this.websocket_flag_state = false
                                        }else { //陌生人
                                            this.websocket_flag_state = true
                                            this.latestFace = setTimeout(() =>{
                                                this.queryLatestFace();
                                            },1000 * 10 * 3)
                                        }
                                    }else {
                                        _this.people_detected_data = []
                                        this.websocket_flag = true
                                    }
                                }
                            }
                        });
                    }
                );
                // Websocket end

                // setTimeout(this.warehouse_auto_selected(), 4096);
            },

            //库区轮询调用
            loginAfter() {
                this.blockchainList(); //上链信息
                this.querySmartContractCallFrequency(); //最新区块，智能合约
            },
            //仓单列表轮询调用
            whrAfter() {
                this.queryInformation(); //仓单信息
            },

            //货仓列表轮询调用
            whAfter() {
                this.queryWhrList()
                this.queryCameraByWhrId(); //摄像
                this.inspectionEvent() //巡检事件
                this.peopleVehiclesMonitoringInformation(); //人员信息
                this.perceptualInformation(); //物联感知信息
                this.queryLatestFace() //查询最新人员数据
            },

            // 仓库信息、仓单信息
            queryInformation() {
                let _this = this;

                /*request('/api/v3/screen/whrMonitoer/queryWhrBaseInfo', {
                        whrId: _this.whrId
                    },_this.entpId,_this.Authorization)*/

                /*axios({url:'/api/v3/screen/whrMonitoer/queryWhrBaseInfo',data:{
                        whrId: _this.whrId
                    },method:"post",headers:{Authorization:_this.Authorization,entpId:_this.entpId}})*/

                request('/api/v3/screen/whrMonitoer/queryWhrBaseInfo', {
                    whrId: _this.whrId
                },_this.entpId,_this.Authorization).then(res => {
                    let resp = res
                    if (resp.code === 401) {
                        _this.$message({
                            message: '会话过期，请重新登录！',
                            type: 'warning'
                        });
                        _this.dialog_show = true;
                        return;
                    }
                    // _this.warehouseBase = res.data.warehouseBase;
                    if(resp.code === 200){
                        _this.radar_update = false;
                        _this.whrBase = resp.data;
                        if (resp.tableList && resp.tableList.length !== 0) {
                            _this.tableList = resp.tableList;
                        }
                        if (resp.warehouseImg) {
                            _this.imgUrl = require('../assets/' + resp.warehouseImg);
                        }
                        // _this.entpFinapplyBasic = resp.data.whrRatingList;
                        this.priceTrendList();
                        if (resp.data.whrRatingList.length != 0) {
                            _this.$nextTick(() => {
                                _this.radar_chart_data = resp.data.whrRatingList;
                                _this.radar_update = true;
                            })
                        }else {
                            _this.radar_chart_data = [];
                            _this.radar_update = false;
                        }
                    }else {
                        _this.whrBase = {}
                        _this.radar_chart_data = [];
                        _this.radar_update = false;
                        _this.price_trend_data = [];
                        _this.price_trend_flag = false;
                    }
                });
            },

            // 价格走势
            priceTrendList() {
                let _this = this;

                let Price ;
                let FuturePrice ;

                let currentDate = this.getNDate(0)
                let old7Date = this.getNDate(-7)

                //现货列表
                /*request('/app/mnyc/price/getPriceList', {
                        categoryId : _this.whrBase.categoryId,
                        addrName: _this.whrBase.markedArea,
                        startDate: old7Date,
                        endDate:   currentDate
                    },_this.entpId,_this.Authorization)*/

                /*axios({url:'/app/mnyc/price/getPriceList', data:{
                        categoryId : _this.whrBase.categoryId,
                        addrName: _this.whrBase.markedArea,
                        startDate: old7Date,
                        endDate:   currentDate
                    },method:"post",headers:{Authorization:_this.Authorization,entpId:_this.entpId}})*/

                Price = []
                request('/app/mnyc/price/getPriceList', {
                    categoryId : _this.whrBase.categoryId,
                    addrName: _this.whrBase.markedArea,
                    startDate: old7Date,
                    endDate:   currentDate
                },_this.entpId,_this.Authorization).then(reps=>{
                    let resp = reps
                    if (resp.code === 401) {
                        _this.$message({
                            message: '会话过期，请重新登录！',
                            type: 'warning'
                        });
                        _this.dialog_show = true;
                        return;
                    }
                    if (resp.code === 200) {
                        Price = resp.data
                    }
                    //现货列表
                    /*request('/app/mnyc/price/getGoodsFuturePriceList', {
                            categoryId : _this.whrBase.categoryId,
                            startDate: old7Date,
                            endDate:   currentDate
                        },_this.entpId,_this.Authorization)*/

                    /*axios({url:'/app/mnyc/price/getGoodsFuturePriceList', data:{
                            categoryId : _this.whrBase.categoryId,
                            startDate: old7Date,
                            endDate:   currentDate
                        },method:"post",headers:{Authorization:_this.Authorization,entpId:_this.entpId}})*/

                    FuturePrice = []
                    request('/app/mnyc/price/getGoodsFuturePriceList', {
                        categoryId : _this.whrBase.categoryId,
                        startDate: old7Date,
                        endDate:   currentDate
                    },_this.entpId,_this.Authorization).then(reps=>{
                        let resp = reps
                        if (resp.code === 401) {
                            _this.$message({
                                message: '会话过期，请重新登录！',
                                type: 'warning'
                            });
                            _this.dialog_show = true;
                            return;
                        }
                        if (resp.code === 200) {
                            FuturePrice = resp.data
                        }


                        let data = {
                            goodsFuturePrices:[],
                            msecGoodsPrices:[],
                            purchasePrice:''
                        };

                        if((Price != null || FuturePrice != null) && (Price.length != 0 || FuturePrice.length != 0)){
                           /* var purchasePrice = FuturePrice;
                            for (var i = 0 ; i < purchasePrice.length ; i++) {
                                purchasePrice[i].price = this.whrBase.approvedPrice
                            }*/

                            data.msecGoodsPrices = Price
                            data.goodsFuturePrices = FuturePrice
                            data.purchasePrice = this.whrBase.approvedPrice

                            _this.price_trend_flag = false;

                            _this.$nextTick(() => {
                                // _this.goods_category_name = res.data.goodsFuturePrices[0].categoryName
                                _this.price_trend_flag = true;
                                _this.price_trend_data = data;
                            })
                        }else {
                            _this.price_trend_data = [];
                            _this.price_trend_flag = false;
                        }
                    })
                })




                /*request('/bigScreen/priceTrend', {
                    whrId: _this.whrId
                }, _this.entpId, _this.Authorization).then(res => {
                    if (res.code === 401) {
                        _this.$message({
                            message: '会话过期，请重新登录！',
                            type: 'warning'
                        });
                        _this.dialog_show = true;
                        return;
                    }

                });*/
            },

            // 物联感知信息
            perceptualInformation() {
                let _this = this;
                let dev_count = [
                    {
                        "devType": 2020030787132789,
                        "devTypeName": "智能摄像头",
                        "devCount": 16,
                        "relativePath": "sxt.png"
                    },
                    {
                        "devType": 2021011460471634,
                        "devTypeName": "NVR设备",
                        "devCount": 1,
                        "relativePath": "nvr.png"
                    }
                ];
                for (let i = 0; i < dev_count.length; i++) {
                    dev_count[i].relativePath = require('@/assets/' + dev_count[i].relativePath);
                }
                for (let i = 0; i < Math.ceil(dev_count.length / 3); i++) {
                    let list = [];
                    list.push(dev_count[i * 3]);
                    if (dev_count[i * 3 + 1]) list.push(dev_count[i * 3 + 1]);
                    if (dev_count[i * 3 + 2]) list.push(dev_count[i * 3 + 2]);

                    _this.dev_count.push(list);
                }
                _this.device_total_flag = false;
                return
                request('/api/v3/screen/whrMonitoer/queryDevCount', {
                    whId: _this.whId
                }, _this.entpId, _this.Authorization).then(res => {
                    if (res.code === 401) {
                        _this.$message({
                            message: '会话过期，请重新登录！',
                            type: 'warning'
                        });
                        _this.dialog_show = true;
                        return;
                    }

                    _this.dev_count = [];
                    // _this.dev_count = res.data;

                    if (res.data && res.data.length !== 0) {
                        let dev_count = res.data;
                        for (let i = 0; i < dev_count.length; i++) {
                            dev_count[i].relativePath = require('@/assets/' + dev_count[i].relativePath);
                        }
                        for (let i = 0; i < Math.ceil(dev_count.length / 3); i++) {
                            let list = [];
                            list.push(dev_count[i * 3]);
                            if (dev_count[i * 3 + 1]) list.push(dev_count[i * 3 + 1]);
                            if (dev_count[i * 3 + 2]) list.push(dev_count[i * 3 + 2]);

                            _this.dev_count.push(list);
                        }
                    }

                    if (_this.dev_count && _this.dev_count.length !== 0) {
                        _this.device_total_flag = false;
                    } else {
                        _this.device_total_flag = true;
                    }

                });
            },

            // 仓单所对应上链区块信息
            blockchainList() {
                let _this = this;


                /*request('/api/v3/screen/blockchain/queryBcRecordList',{
                        page : "1",
                        limit: "20",
                    },_this.entpId,_this.Authorization)*/
                /*axios({url:'/api/v3/screen/blockchain/queryBcRecordList', data:{
                        page : "1",
                        limit: "20",
                    },method:"post",headers:{Authorization:_this.Authorization,entpId:_this.entpId}})*/

                request('/api/v3/screen/blockchain/queryBcRecordList',{
                    page : "1",
                    limit: "20",
                },_this.entpId,_this.Authorization).then(res => {
                    let resp = res
                    if (resp.code === 401) {
                        _this.$message({
                            message: '会话过期，请重新登录！',
                            type: 'warning'
                        });
                        _this.dialog_show = true;
                        return;
                    }

                    for (let i = 0; i < resp.data.rows.length; i++) {
                        console.log(resp.data.rows[i].content)
                        if (resp.data.rows[i].content) {
                            resp.data.rows[i].content = JSON.parse(resp.data.rows[i].content)? JSON.parse(resp.data.rows[i].content):'';
                        }
                    }

                    if (resp.data.rows && resp.data.rows.length !== 0) {

                        resp.data.rows.sort(function(s, t) {
                            let a = s.height;
                            let b = t.height;
                            if (a < b) return -1;
                            if (a > b) return 1;
                            return 0;
                        });

                        // _this.block_chain_data_blockItem = res.data.data.rows;

                        resp.data.rows.sort(function(s, t) {
                            let a = s.blockTime;
                            let b = t.blockTime;
                            if (a < b) return -1;
                            if (a > b) return 1;
                            return 0;
                        });
                        _this.block_chain_data_blockItem_flag = true;
                        _this.isReloadData = false
                        _this.block_chain_data_blockItem = []
                        if(resp.data.total != 0){
                            for (let i = 0; i < resp.data.rows.length; i++){
                                let content = resp.data.rows[i].content;
                                _this.block_chain_data_blockItem.push(resp.data.rows[i])
                                _this.block_chain_data_blockItem[i].subhead = content.subhead
                                _this.block_chain_data_blockItem[i].title = content.title
                            }
                        }
                        _this.block_chain_data_blockItem_flag = false;
                        _this.$nextTick(() => {
                            _this.isReloadData = true
                            _this.block_chain_move_distance = 0;
                            _this.block_chain_index = 6;
                            clearInterval(_this.funcBlock);
                            _this.block_chain_scroll_fun();
                        })
                    }

                    // setTimeout(() => {
                        // _this.numberScroll();
                        // _this.numberScroll1();
                    // }, 800)
                });
            },

            // 摄像信息
            queryCameraByWhrId() {
                let _this = this;
                //清空播放列表
                /* let players = this.$refs.player;
                if (players && players.length > 0) {
                    players.forEach(video => {
                        video.pause();
                    })
                }

                this.flv_list.forEach(flv => {
                    flv.destroy();
                    flv = null;
                });
                this.hls_list.forEach(hls => {
                    hls.destroy();
                    hls = null;
                });
                this.flv_list = []
                this.hls_list = [] */

                request('/api/v3/screen/whrMonitoer/queryCameraByWhId', {
                    whId: _this.whId
                }, _this.entpId,_this.Authorization).then(res => {
                    if (res.code === 401) {
                        _this.$message({
                            message: '会话过期，请重新登录！',
                            type: 'warning'
                        });
                        _this.dialog_show = true;
                        return;
                    }

                    if (res.data && res.data.length !== 0) {
                        _this.camera_video_list = res.data;
                        _this.camera_video_list_flag = false;
                        _this.$nextTick(() => {
                            // _this.initPlayer();
                            _this.showPlayer(_this.camera_video_list[0])
                        });
                    } else {
                        _this.camera_video_list = [];
                        _this.camera_video_list_flag = true;
                    }
                });

                let current_data = setInterval(() => {
                    this.getCurrentDate();
                }, 1000);
            },

            getCurrentDate() {
                let date = new Date();
                var y = date.getFullYear();
                var m = date.getMonth() + 1;
                m = m < 10 ? '0' + m : m;
                var d = date.getDate();
                d = d < 10 ? '0' + d : d;
                var h = date.getHours();
                h = h < 10 ? '0' + h : h;
                var minute = date.getMinutes();
                minute = minute < 10 ? '0' + minute : minute;
                var second = date.getSeconds();
                second = second < 10 ? '0' + second : second;
                this.current_data = y + '年' + m + '月' + d + '日' + h + '时' + minute + '分' + second + '秒';
            },
            getNDate(n) {
                n = n ? n : 0;
                var curTime = new Date();
                var curTime2 = new Date(curTime);
                curTime2.setDate(curTime.getDate() + n);
                return (
                    curTime2.getFullYear() +
                    '-' +
                    (curTime2.getMonth() + 1 > 9 ? curTime2.getMonth() + 1 : '0' + (curTime2.getMonth() + 1)) +
                    '-' +
                    (curTime2.getDate() > 9 ? curTime2.getDate() : '0' + curTime2.getDate())
                );
            },

            numberScroll() {
                let _this = this;
                // 区块高度
                let count_block_height = new CountUp("block_height_numScroll",
                    0, _this.block_height, 0, 5, {
                        useEasing: false,
                        useGrouping: true
                    })
                if (!count_block_height.error) {
                    count_block_height.start()
                } else {
                }

            },

            numberScroll1() {
                let _this = this;

                let prefix_zero = '';
                let number_length = 7 - _this.contract_calls.toString().length;

                for (let i = 0; i < number_length; i++) {
                    prefix_zero += '0';
                }
                // 智能合约调用次数
                let count_number_of_smart_contract_calls = new CountUp("contract_calls_numScroll",
                    0, _this.contract_calls, 0, 5, {
                        useEasing: false,
                        useGrouping: true
                    })
                if (!count_number_of_smart_contract_calls.error) {
                    count_number_of_smart_contract_calls.start()
                } else {
                }
            },

            changeSource(e) {
              
            },
            initPlayer() {
               
            },
            showPlayer(itemDev){
               
            },

            // 运营情况
            operationStatusInformation() {
                let _this = this;
                request('/screen/digitalAssetsRiskCtr/operationStatusInformation', {
                    whrId: _this.whrId
                }, _this.entpId, _this.Authorization).then(res => {
                    if (res.code === 401) {
                        _this.$message({
                            message: '会话过期，请重新登录！',
                            type: 'warning'
                        });
                        _this.dialog_show = true;
                        return;
                    }

                    if (res.data && res.data.length !== 0) {

                        if (res.data.eventCount && res.data.eventCount.length !== 0) {
                            _this.monitor_event_count = res.data.eventCount;
                            _this.monitor_event_count_flag = false;
                        }

                        if (res.data.workorderCount && res.data.workorderCount.length !== 0) {
                            _this.monitor_workorder_count = res.data.workorderCount;
                            _this.monitor_workorder_count_flag = false;
                        }
                        _this.operationStatusInformationDailyCount = res.data.dailyCount;

                    }

                });
            },

            // 人员信息与车辆监管信息
            peopleVehiclesMonitoringInformation() {
                let _this = this;
                /*request('/app/mnyc/dutySystem/getDutySystem', {
                        whId: _this.whId
                    },_this.entpId,_this.Authorization)*/

                /*axios({url:'/app/mnyc/dutySystem/getDutySystem', data:{
                        whId: _this.whId
                    },method:"post",headers:{Authorization:_this.Authorization,entpId:_this.entpId}})*/
                request('/app/mnyc/dutySystem/getDutySystem', {
                    whId: Number(_this.whId),
                },_this.entpId,_this.Authorization).then(res => {
                    let resp = res
                    if (resp.code === 401) {
                        _this.$message({
                            message: '会话过期，请重新登录！',
                            type: 'warning'
                        });
                        _this.dialog_show = true;
                        return;
                    }
                    if (resp.tableList && resp.tableList.length !== 0) {
                        _this.tableList = resp.tableList;
                    }
                    if (resp.warehouseImg) {
                        _this.imgUrl = require('../assets/' + resp.warehouseImg);
                    }
                    if (resp.data && resp.data.length !== 0) {

                        _this.personal_monitor = []

                        let peopleStatistics = resp.data

                        for (let i = 0; i < Math.ceil(peopleStatistics.length / 3); i++) {
                            let list = [];
                            list.push(peopleStatistics[i * 3]);
                            if (peopleStatistics[i * 3 + 1]) list.push(peopleStatistics[i * 3 + 1]);
                            if (peopleStatistics[i * 3 + 2]) list.push(peopleStatistics[i * 3 + 2]);

                            _this.personal_monitor.push(list);
                        }

                        // _this.personal_monitor = resp.data;
                        _this.personal_monitor_flag = false;
                    }else {
                        _this.personal_monitor = []
                        _this.personal_monitor_flag = true;
                    }

                    /*if (res.data.snapshotInfo && res.data.snapshotInfo.length !== 0) {
                        _this.cars_monitor = res.data.snapshotInfo;
                        _this.cars_monitor_flag = false;
                    }*/

                });
            },

            socket_data_push() {
                // Websocket
                let _this = this;
                const socket = new SockJS('http://localhost:8007/endpointChat');
                const stompClient = Stomp.over(socket);
                const headers = {
                    Authorization: this.Authorization,
                    entpId: this.entpId
                };
                stompClient.debug = function (str) {
                };
                stompClient.connect(
                    headers,
                    () => {
                        stompClient.subscribe('/user/cwhScreen_face/queue/getResponse', response => {
                            if (JSON.parse(response.body).messageType == 8) {
                                _this.people_detected_data = JSON.parse(response.body).data;
                                Object.keys(this.pledgeForm).forEach((key) => {
                                    if (pledge[key] != null) {
                                        this.pledgeForm[key] = pledge[key]
                                    }
                                })

                                setTimeout(() => {
                                    _this.people_detected_fun(_this.people_detected_data)
                                }, 2048);
                            }
                        });
                    }
                )
            },


            block_chain_scroll_fun() {
                let _this = this;
                _this.funcBlock = null;

                if (_this.block_chain_data_blockItem.length > 6) {
                    _this.funcBlock = setInterval(detected, 3000);
                }

                function detected() {
                    _this.block_chain_move_distance += (-266/3840*100);

                    if (_this.block_chain_index == _this.block_chain_data_blockItem.length - 1 || _this.block_chain_index > _this.block_chain_data_blockItem.length - 1) {
                        clearInterval(_this.funcBlock);
                    }
                    _this.block_chain_index++;
                }

            },

            block_chain_move_fun() {
                let _this = this;

                _this.block_chain_data_blockItem.push(_this.websocket_block_chain_data);
                if (_this.block_chain_data_blockItem.length > 6) {
                    _this.block_chain_scroll_fun();
                    _this.isReloadData = false;

                    // 指定div进行刷新
                    _this.$nextTick(() => {
                        _this.isReloadData = true;
                    })
                }
            },

            querySmartContractCallFrequency() {
                let _this = this;



                /*request('/api/v3/screen/blockchain/queryScreenBcInfo', {
                        entpId: _this.entpId
                    },_this.Authorization,_this.entpId)*/

                /*axios({url:'/api/v3/screen/blockchain/queryScreenBcInfo', data:{
                        entpId: _this.entpId
                    },method:"post",headers:{Authorization:_this.Authorization,entpId:_this.entpId}})*/

                request('/api/v3/screen/blockchain/queryScreenBcInfo', {
                    entpId: _this.entpId
                },_this.entpId,_this.Authorization).then(res => {
                    let resp = res
                    if (resp.code === 401) {
                        _this.$message({
                            message: '会话过期，请重新登录！',
                            type: 'warning'
                        });
                        _this.dialog_show = true;
                        return;
                    }
                    if(resp.code === 200){
                        _this.block_height = resp.data.lastBlockHeight
                        _this.contract_calls = resp.data.countTradeStat
                        setTimeout(() => {
                            _this.numberScroll();
                            _this.numberScroll1();
                        }, 800)
                    }
                });
            },

            inspectionEvent(){
                let _this = this;
                /*request('/app/workorder/queryWorkorderList', {
                        whId: _this.whId,
                        status:1,
                        typecode:1
                    },_this.entpId,_this.Authorization)*/

                /*axios({url:'/app/workorder/queryWorkorderList', data:{
                        whId: _this.whId,
                        status:1,
                        typecode:1
                    },method:"post",headers:{Authorization:_this.Authorization,entpId:_this.entpId}})*/

                request('/api/v3/screen/whrMonitoer/queryWorkorderList', {
                   whId: _this.whId,
                   status:1,
                   typecode:3
                },_this.entpId,_this.Authorization).then(res => {
                    let resp = res
                    if (resp.code === 401) {
                        _this.$message({
                            message: '会话过期，请重新登录！',
                            type: 'warning'
                        });
                        _this.dialog_show = true;
                        return;
                    }
                    if(resp.code === 200){
                        _this.inspectionEventList = resp.data.rows
                        _this.inspectionEvent_flag = false
                        if(resp.data.total == 0 ){
                            _this.jinggao = false
                            /*request('/app/mnyc/msCheck/getMsCheckList', {
                                    checkType: _this.checkType
                                },_this.entpId,_this.Authorization)*/

                            /*axios({url:'/app/mnyc/msCheck/getMsCheckList', data:{
                                    checkType: _this.checkType
                                },method:"post",headers:{Authorization:_this.Authorization,entpId:_this.entpId}})*/

                            request('/app/mnyc/msCheck/getMsCheckList', {                           
								whId: Number(_this.whId),
								checkType: 4
                            },_this.entpId,_this.Authorization).then(res => {
                                let resp = res
                                if (resp.code === 401) {
                                    _this.$message({
                                        message: '会话过期，请重新登录！',
                                        type: 'warning'
                                    });
                                    _this.dialog_show = true;
                                    return;
                                }
                                if(resp.code === 200){
                                    _this.inspectionEventList = resp.data
                                    _this.inspectionEvent_flag = false
                                }else {
                                    _this.inspectionEvent_flag = true
                                }
                            });
                        }else {
                            _this.jinggao = true
                        }
                    }else {
                        request('/app/mnyc/msCheck/getMsCheckList', {
                            whId:Number(_this.whId),
							checkType:4							
                        },_this.entpId,_this.Authorization).then(res => {
                            let resp = res
                            if (resp.code === 401) {
                                _this.$message({
                                    message: '会话过期，请重新登录！',
                                    type: 'warning'
                                });
                                _this.dialog_show = true;
                                return;
                            }
                            if(resp.code === 200){
                                _this.inspectionEventList = resp.data
                                _this.inspectionEvent_flag = false
                            }else {
                                _this.inspectionEvent_flag = true
                            }
                        });
                    }
                });
            },
            //查询库区列表
            async locationInformation(){
                window.localStorage.setItem('page',this.page);
                let _this = this;
                /*request('/api/v3/screen/whrMonitoer/queryAssetPositionList',{
                        params:''
                    },
                    _this.entpId,_this.Authorization)*/

                /*axios({url:'/api/v3/screen/whrMonitoer/queryAssetPositionList',data :{
                        params:''
                    },
                    method:"post",
                    headers:{Authorization:_this.Authorization,entpId:_this.entpId}})*/
                
                let resp = null
                await request('/api/v3/screen/whrMonitoer/queryAssetPositionList',{
                        params:''
                    },
                    _this.entpId,_this.Authorization).then(res => {
                    resp = res
                    if (resp.code === 401) {
                        _this.$message({
                            message: '会话过期，请重新登录！',
                            type: 'warning'
                        });
                        _this.dialog_show = true;
                        return;
                    }
                    if(resp.code === 200){

                        // _this.inspectionEventList = res.data.data
                        // _this.inspectionEvent_flag = false
                    }
                }
                ).catch(e =>{
                    console.error(e)
                });
                if(resp.data.length != 0){
                    this.whList = resp.data
                    this.warehouseBase.whName = resp.data[0].whName
                    this.warehouseBase.address = resp.data[0].address
                    this.warehouseBase.addr = resp.data[0].addr
                    if(resp.data[0].whList.length != 0){
                        this.whId = resp.data[0].whList[0].goodsPositionId
                        this.warehouseBase.goodsPosition = resp.data[0].whList[0].goodsPosition
                        this.whAfter()
                    }
                    this.loginAfter()
                    this.$nextTick(() => {
                        setTimeout(() => {
                            //2.5D：更新库区
                            // this.$refs.graphPage.contentWindow.reloadJSON(resp.data[0].whId)
                            if(resp.data[0].whList.length != 0){
                                //2.5D：轮播更新
                                setTimeout(() => {
                                    let graphData = {"whId": resp.data[0].whList[0].goodsPositionId, "whName": resp.data[0].whList[0].goodsPosition}
                                    // this.$refs.graphPage.contentWindow.updateBalloon(graphData)
                                }, 2000)
                            }
                        }, 5000)
                    })
                    //货仓训话
                    if(resp.data[0].whList.length > 1){
                        //获取当前货仓下的仓单条数
                        let whrCount = 0;
                        let whList = []
                        whList.push(resp.data[0].whList[0])
                        await this.queryWhrCount(whList).then(res =>{
                            whrCount = res * 3
                        })
                        let whTime = 1000 * 30 * 1
                        let j = 1;
                        this.whListInterval = setInterval(()=>{
                            this.warehouseRotation(j)
                        },whTime)
                    }
                    if(resp.data.length > 1){
                        //获取当前库区下所有货仓的仓单条数
                        let whrCount = 0;
                        await this.queryWhrCount(resp.data[0].whList).then(res =>{
                            whrCount = res * 3
                        })
                        let whTime = 10 * 30 * 1;
                        //库区循环
                        let i = 1;
                        this.carousel = setInterval(()=>{
                            if(i > this.whList.length-1){
                                i = 0
                            }
                            clearInterval(this.whListInterval);
                            this.cycleWhList(i)
                            i++
                        },whTime)
                    }
                }
            },
            //仓单列表
            queryWhrList(){
                let _this = this;

                /*request('/api/v3/screen/whrMonitoer/queryWhrList',{
                        whId:_this.whId
                    },
                   _this.entpId,_this.Authorization)*/

                /*axios({url:'/api/v3/screen/whrMonitoer/queryWhrList',data :{
                        whId:_this.whId
                    },
                    method:"post",
                    headers:{Authorization:_this.Authorization,entpId:_this.entpId}})*/

                request('/api/v3/screen/whrMonitoer/queryWhrList',{
                        whId:_this.whId
                    },
                    _this.entpId,_this.Authorization).then(res => {
                    let resp = res
                    if (resp.code === 401) {
                        _this.$message({
                            message: '会话过期，请重新登录！',
                            type: 'warning'
                        });
                        _this.dialog_show = true;
                        return;
                    }
                    if(resp.code === 200){
                        if(resp.data.length != 0){
                            this.whrList = resp.data
                            this.whrId = resp.data[0].whrId
                            this.whrAfter();
                            var j = 1;
                            var isCarouse = JSON.parse(localStorage.getItem('isCarouse'));
                            clearInterval(this.wrhListInterval);
                            if(isCarouse !== null){
                                if(isCarouse){
                                    clearInterval(this.wrhListInterval);
                                    this.wrhListInterval = setInterval(()=>{
                                        if(j == this.whrList.length){
                                            j = 0
                                        }
                                        this.whrId = this.whrList[j].whrId
                                        this.whrAfter();
                                        j++
                                    },1000 * 30 * 1)
                                }
                            }else {
                                clearInterval(this.wrhListInterval);
                                this.wrhListInterval = setInterval(()=>{
                                    if(j == this.whrList.length){
                                        j = 0
                                    }
                                    this.whrId = this.whrList[j].whrId
                                    this.whrAfter();
                                    j++
                                },1000 * 30 * 1)
                            }
                        }else {
                            this.whrList = []
                            this.whrId = ''
                            _this.whrBase = {}
                            _this.radar_chart_data = [];
                            _this.radar_update = false;
                            _this.price_trend_data = [];
                            _this.price_trend_flag = false;
                        }

                        // _this.inspectionEventList = res.data.data
                        // _this.inspectionEvent_flag = false
                    }
                });
            },
            //库区轮训
            async cycleWhList(idx){
                if(this.page === 11){
                    this.page = 0
                }
                window.localStorage.setItem('page',parseInt(this.page) +1);
                this.page++
                // this.page
                console.log(this.page,'这是轮询第'+this.page)
                // clearInterval(this.wrhListInterval);
                this.warehouseBase.whName = this.whList[idx].whName
                this.warehouseBase.address = this.whList[idx].address
                this.warehouseBase.goodsPosition = this.whList[idx].whList[0].goodsPosition
                this.warehouseBase.addr = this.whList[idx].addr
                this.whId = this.whList[idx].whList[0].goodsPositionId
                this.loginAfter()
                this.whAfter()
                if( (this.whList[idx].address == null || this.whList[idx].address == '') || (this.whList[idx].addr == null || this.whList[idx].addr == '')){
                    this.queryWareHouseByWhId(this.whList[idx].whId)
                }

                localStorage.setItem("warehouseBase",JSON.stringify(this.whList[idx])); //循环的库区信息
                localStorage.setItem("warehouseBase",JSON.stringify(this.whList[idx].whList[0])); //货仓集合

                //2.5D轮播更新  true：库区 false：货仓
                this.$nextTick(() => {
                //   this.$refs.graphPage.contentWindow.location.reload(true)
                  setTimeout(() => {
                    //2.5D：更新库区
                    // this.$refs.graphPage.contentWindow.reloadJSON(this.whList[idx].whId)

                    //2.5D：轮播更新
                    setTimeout(() => {
                      let graphData = {"whId": this.whList[idx].whList[0].goodsPositionId, "whName": this.whList[idx].whList[0].goodsPosition}
                    //   this.$refs.graphPage.contentWindow.updateBalloon(graphData)
                    }, 2000)
                  }, 5000)
                })
                let i = 1;
                clearInterval(this.whListInterval);
                if(this.whList[idx].whList.length > 1){
                    //获取当前库区下所有货仓的仓单条数
                    let whrCount = 0;
                    let whList = []
                    whList.push(this.whList[idx].whList[0])
                    await this.queryWhrCount(whList).then(res =>{
                        whrCount = res * 3
                    })
                    let whTime = 1000 * 30 * 1;
                    this.whListInterval = setInterval(()=>{
                        this.whRotation(idx,i)
                    },whTime)
                }
                clearInterval(this.carousel);
                //获取当前库区下所有货仓的仓单条数
                let whrCount = 0;
                await this.queryWhrCount(this.whList[idx].whList).then(res =>{
                    whrCount = res * 3
                })
                let whTime = 1000 * 30 * 1;
                idx++;
                //库区循环
                this.carousel = setInterval(()=>{
                    if(idx > this.whList.length-1){
                        idx = 0
                    }
                    this.cycleWhList(idx)
                    i++
                },whTime)


            },
            //货仓轮训
            async warehouseRotation(j){
                if(j == this.whList[0].whList.length){
                    j = 0
                }
                this.warehouseBase.goodsPosition = this.whList[0].whList[j].goodsPosition
                this.whId = this.whList[0].whList[j].goodsPositionId

                //2.5D：轮播更新
                let graphData = {"whId": this.whId, "whName": this.warehouseBase.goodsPosition}
                // this.$refs.graphPage.contentWindow.updateBalloon(graphData)

                this.whAfter()
                clearInterval(this.whListInterval);
                //获取当前货仓下的仓单条数
                let whrCount = 0;
                let whList = []
                whList.push(this.whList[0].whList[j])
                await this.queryWhrCount(whList).then(res =>{
                    whrCount = res * 3
                })
                let whTime = 1000 * 30 * 1
                j++
                if(j == this.whList[0].whList.length){
                    j = 0
                }
                this.whListInterval = setInterval(()=>{
                    this.warehouseRotation(j)
                },whTime)
            },
            //货仓轮训-1
            async whRotation(idx,j){
                this.warehouseBase.goodsPosition = this.whList[idx].whList[j].goodsPosition
                this.whId = this.whList[idx].whList[j].goodsPositionId
                this.whAfter()

                //2.5D轮播更新  true：库区 false：货仓
                let graphData = {"whId": this.whId, "whName": this.warehouseBase.goodsPosition}
                // this.$refs.graphPage.contentWindow.updateBalloon(graphData)

                clearInterval(this.whListInterval);
                //获取当前货仓下的仓单条数
                let whrCount = 0;
                var whList = []
                whList.push(this.whList[0].whList[j])
                await this.queryWhrCount(whList).then(res =>{
                    whrCount = res * 3
                })
                let whTime = 1000 * 30 * 1
                j++
                if(i == this.whList[0].whList.length){
                    j = 0
                }
                this.whListInterval = setInterval(()=>{
                    this.whRotation(idx,j)
                },whTime)
            },
            //轮播配置
            showTree(){
                let _this = this;
                this.dialogFormAddVisible = true
                this.$nextTick(() => {
                   this.$refs['warehouseTree'].getTreeList( _this.entpId,_this.Authorization)
                })
            },
            buttnShows(){
                let _this = this;
                this.buttnShow = true
            },
            confirmTree(){
                let _this = this;
                this.$nextTick(() => {
                    let res = this.$refs['warehouseTree'].confirmTree();
                    if(res.code === 200){

                        this.dialogFormAddVisible = false
                        _this.$message({
                            message: res.message,
                            type: 'success'
                        });
                    }else{
                        this.dialogFormAddVisible = true
                        _this.$message({
                            message: res.message,
                            type: 'error'
                        });
                    }
                })

            },
            cancelTree(){
                this.dialogFormAddVisible = false
            },
            //轮训
            async rotation(wareList){
                if(wareList != null && wareList.length != 0){
                    this.whList = wareList
                    this.warehouseBase.whName = wareList[0].whName
                    this.loginAfter()

                    if(wareList[0].whList.length != 0){
                        this.warehouseBase.goodsPosition = wareList[0].whList[0].goodsPosition
                        this.whId = wareList[0].whList[0].goodsPositionId
                        this.whAfter()
                        if( (wareList[0].address == null || wareList[0].address == '') && (wareList[0].addr == null || wareList[0].addr == '')){
                            this.queryWareHouseByWhId(wareList[0].whId)
                        }

                        localStorage.setItem("reservoirArea",JSON.stringify(wareList[0])); //循环的库区信息
                        localStorage.setItem("warehouseBase",JSON.stringify(wareList[0].whList[0])); //货仓集合

                        this.$nextTick(() => {
                            // this.$refs.graphPage.contentWindow.location.reload(true)
                            setTimeout(() => {
                                //2.5D：更新库区
                                try{
                                    // this.$refs.graphPage.contentWindow.reloadJSON(wareList[0].whId)

                                    //2.5D：轮播更新
                                    setTimeout(() => {
                                        let graphData = {"whId": wareList[0].whList[0].goodsPositionId, "whName": wareList[0].whList[0].goodsPosition}
                                        // this.$refs.graphPage.contentWindow.updateBalloon(graphData)
                                    }, 2000)
                                }catch (e){
                                    setTimeout(() => {
                                        // this.$refs.graphPage.contentWindow.reloadJSON(wareList[0].whId)

                                        //2.5D：轮播更新
                                        setTimeout(() => {
                                            let graphData = {"whId": wareList[0].whList[0].goodsPositionId, "whName": wareList[0].whList[0].goodsPosition}
                                            // this.$refs.graphPage.contentWindow.updateBalloon(graphData)
                                        }, 2000)
                                    }, 3000)
                                }
                            }, 5000)
                        })


                        if(this.whList[0].whList.length > 1){
                            let j = 1;

                            //获取当前货仓下的仓单条数
                            let whrCount = 0;
                            let whList = []
                            whList.push(this.whList[0].whList[0])
                            await this.queryWhrCount(whList).then(res =>{
                                whrCount = res * 3
                            })
                            let whTime = 1000 * 30 * 1
                            this.whListInterval = setInterval(()=>{
                                this.warehouseRotation(j)
                            },whTime)

                            /*this.whListInterval = setInterval(()=>{
                                if(j == this.whList[0].whList.length){
                                    j = 0
                                }
                                this.warehouseBase.goodsPosition = this.whList[0].whList[j].goodsPosition
                                this.whId = this.whList[0].whList[j].goodsPositionId

                                //2.5D轮播更新  true：库区 false：货仓
                                let graphData = {"whId": this.whId, "whName": this.warehouseBase.goodsPosition}
                                this.$refs.graphPage.contentWindow.updateBalloon(graphData)

                                this.whAfter()
                                localStorage.setItem("warehouseBase",JSON.stringify(wareList[0].whList[j])); //货仓集合
                                j++
                                if(i == this.whList[0].whList.length){
                                    j = 0
                                }
                            },1000 * 60 * 10)*/
                        }
                    }

                    if(wareList.length > 1){
                        //获取当前库区下所有货仓的仓单条数
                        let whrCount = 0;
                        await this.queryWhrCount(this.whList[0].whList).then(res =>{
                            whrCount = res * 3
                        })
                        let whTime = 1000 * 30 * 1;
                        //库区循环
                        let i = 1;
                        this.carousel = setInterval(()=>{
                            if(i > this.whList.length-1){
                                i = 0
                            }
                            clearInterval(this.whListInterval);
                            this.cycleWhList(i)
                            i++
                        },whTime)
                    }
                }
            },
            endCarousel(wareList){
                clearInterval(this.whListInterval);//结束货仓轮播
                clearInterval(this.carousel); // 结束库区轮播
                // clearInterval(this.carousel); // 结束库区轮播
                clearInterval(this.wrhListInterval)
                let reservoirArea = null
                let warehouseBase = null
                if(wareList != null && wareList.length != 0){
                    reservoirArea = wareList[0]
                    warehouseBase = wareList[0].whList[0]
                    localStorage.setItem("reservoirArea",JSON.stringify(wareList[0])); //循环的库区信息
                    localStorage.setItem("warehouseBase",JSON.stringify(wareList[0].whList[0])); //货仓集合
                }else {
                    reservoirArea = JSON.parse(localStorage.getItem('reservoirArea')); //库区
                    warehouseBase = JSON.parse(localStorage.getItem('warehouseBase')); //货仓
                }
                this.warehouseBase.whName = reservoirArea.whName
                this.warehouseBase.goodsPosition = warehouseBase.goodsPosition
                this.whId = warehouseBase.goodsPositionId
                this.loginAfter()
                this.whAfter()

                setTimeout(() => {
                  try {
                    //2.5D：更新库区
                    // this.$refs.graphPage.contentWindow.reloadJSON(reservoirArea.whId)

                    //2.5D：轮播更新
                    setTimeout(() => {
                      let graphData = {"whId": warehouseBase.goodsPositionId, "whName": warehouseBase.goodsPosition}
                    //   this.$refs.graphPage.contentWindow.updateBalloon(graphData)
                    }, 2000)
                  } catch (e){
                    setTimeout(() => {
                      //2.5D：更新库区
                    //   this.$refs.graphPage.contentWindow.reloadJSON(reservoirArea.whId)

                      //2.5D：轮播更新
                      setTimeout(() => {
                        let graphData = {"whId": warehouseBase.goodsPositionId, "whName": warehouseBase.goodsPosition}
                        // this.$refs.graphPage.contentWindow.updateBalloon(graphData)
                      }, 2000)
                    }, 3000)
                  }
                }, 5000)
            },
            //查询库区简要数据
            queryWareHouseByWhId(whId) {
                let _this = this;



                /*request('/api/v3/screen/blockchain/queryScreenBcInfo', {
                        entpId: _this.entpId
                    },_this.Authorization,_this.entpId)*/

                /*axios({url:'/api/v3/screen/blockchain/queryScreenBcInfo', data:{
                        entpId: _this.entpId
                    },method:"post",headers:{Authorization:_this.Authorization,entpId:_this.entpId}})*/

                request('/api/v3/screen/whrMonitoer/queryWareHouseByWhId', {
                    whId: whId
                },_this.entpId,_this.Authorization).then(res => {
                    let resp = res
                    if (resp.code === 401) {
                        _this.$message({
                            message: '会话过期，请重新登录！',
                            type: 'warning'
                        });
                        _this.dialog_show = true;
                        return;
                    }
                    if(resp.code === 200){
                        this.warehouseBase.address = resp.data.address
                        this.warehouseBase.addr = resp.data.addr
                    }
                });
            },
            //查询最新人脸抓拍数据
            queryLatestFace() {
                let _this = this;



                /*request('/api/v3/screen/blockchain/queryScreenBcInfo', {
                        entpId: _this.entpId
                    },_this.Authorization,_this.entpId)*/

                /*axios({url:'/api/v3/screen/blockchain/queryScreenBcInfo', data:{
                        entpId: _this.entpId
                    },method:"post",headers:{Authorization:_this.Authorization,entpId:_this.entpId}})*/

                request('/api/v3/screen/whrMonitoer/queryLatestFace', {
                    whId: _this.whId
                },_this.entpId,_this.Authorization).then(res => {
                    let resp = res
                    if (resp.code === 401) {
                        _this.$message({
                            message: '会话过期，请重新登录！',
                            type: 'warning'
                        });
                        _this.dialog_show = true;
                        return;
                    }
                    if(resp.code === 200){
                        /*this.dataCollection.snapFacePicPath=resp.data.snapFacePicPath
                        this.dataCollection.picSnapTime=resp.data.picSnapTime
                        this.dataCollection.dutySystem=resp.data.dutySystem
                        this.dataCollection.deployName=resp.data.deployName
                        this.dataCollection.deviceName = resp.data.deviceName
                        this.dataCollection.byMask = resp.data.byMask
                        this.dataCollection.bySmile = resp.data.bySmile
                        this.dataCollection.byGlasses = resp.data.byGlasses

                        this.localData.similarity = resp.data.similarity
                        this.localData.paceBoxFacePath = resp.data.paceBoxFacePath
                        this.localData.faceBox = resp.data.faceBox
                        this.localData.userName = resp.data.userName
                        this.localData.jobTitle = resp.data.jobTitle
                        this.localData.phone = resp.data.phone
                        this.localData.cardNo = resp.data.cardNo
                        this.localData.entpName = resp.data.entpName*/
                        if(resp.data.face != null){
                            _this.people_detected_data = resp.data.face
                            if(_this.people_detected_data.certFileDTOS != null){
                                for (let i = 0; i < _this.people_detected_data.certFileDTOS.length; i++) {
                                    if (_this.people_detected_data.certFileDTOS[i].fileName.indexOf('Stranger_Intrude_blacklistFaceSnap') != -1) {
                                        _this.people_detected_data.local_img = _this.people_detected_data.certFileDTOS[i].relativePath;
                                    }
                                    if (_this.people_detected_data.certFileDTOS[i].fileName.indexOf('Stranger_Intrude_faceSnap') != -1) {
                                        _this.people_detected_data.intrude_img = _this.people_detected_data.certFileDTOS[i].relativePath;
                                    }
                                }
                            }
                            this.websocket_flag = false
                            this.refresh_ = false
                            this.$nextTick(() =>{
                                // this.refresh_ = !this.refresh_
                                this.refresh_ = true
                            })
                            if(this.people_detected_data.status == 1){//打卡
                                this.websocket_flag_state = false
                            }else { //陌生人
                                this.websocket_flag_state = true
                            }
                        }else {
                            _this.people_detected_data = []
                            this.websocket_flag = true
                        }
                        /*setTimeout(() => {
                            _this.people_detected_fun(_this.people_detected_data)
                        }, 2048);*/
                    }
                });
            },
            //获得仓单条数
            async queryWhrCount(whIds){
                let _this = this;
                let whrcount = 0
                await request('/api/v3/screen/whrMonitoer/queryWhrCount',{
                        whIds:whIds
                    },
                    _this.entpId,_this.Authorization).then(res => {
                    let resp = res
                    if (resp.code === 401) {
                        _this.$message({
                            message: '会话过期，请重新登录！',
                            type: 'warning'
                        });
                        _this.dialog_show = true;
                        return;
                    }
                    if(resp.code === 200){
                        whrcount = resp.data
                    }
                });
                return whrcount;
            },
        },
        components: {
            Goods_price_trend_chart,
            Warehouse_receipt_evaluation,
            Warehouse_tree
        },
        beforeDestroy() {
            this.player.destroy();
            let _this = this
            clearInterval(_this.whListInterval);//结束货仓轮播
            clearInterval(_this.carousel); // 结束库区轮播
            // clearInterval(this.carousel); // 结束库区轮播
            clearInterval(_this.wrhListInterval)
            let reservoirArea = null
            let warehouseBase = null
            reservoirArea = JSON.parse(localStorage.getItem('reservoirArea')); //库区
            warehouseBase = JSON.parse(localStorage.getItem('warehouseBase')); //货仓
            if (reservoirArea) {
                _this.warehouseBase.whName = reservoirArea.whName
            }
            if (warehouseBase) {
                _this.warehouseBase.goodsPosition = warehouseBase.goodsPosition
                _this.whId = warehouseBase.goodsPositionId
            }

            clearInterval(_this.funcBlock);
        }

    }
</script>

<style scoped lang="scss">


    .page-title {
        font-size: (68 / 3840 * 100) + vw;
        font-weight: bold;
        color: white;
        background: linear-gradient(180deg, #8ecdff 0%, #f3f8fd 41%, #75caff 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        position: absolute;
        /*left: 50%;*/
        top: 0;
        margin-top: (25 / 2160 * 100) + vh;
        // margin-left: -100px;
        width: (3840 / 3840 * 100) + vw;
        text-align: center;
        /*<!--margin-left: -1800px;-->*/
        /*<!--margin-left: -350px;-->*/
        justify-content: center;
        display: flex;

        .title-content {
            /*text-align: center;*/
            display: flex;

            .title-text {
                margin: 0 (60 / 2160 * 100) + vh;
                min-width: (256 / 3840 * 100) + vw;
            }

            .title-img {

                .img {
                    width: (1513 / 3840 * 100) + vw;
                    height: (95 / 2160 * 100) + vh;
                }

                .img.scaleX-img {
                    transform: scaleX(-1);
                }
            }
        }

    }


    .container {
        width: 100vw;
        height: 100vh;
        background: url("../assets/BK_01@2x.png") center no-repeat;
        background-size: 100% 100%;
        display: flex;

        /*font-family: PingFangSC-Semibold,PingFang SC;*/

        .title-container {
            width: (814  / 3840 * 100) + vw;
            height: (31 / 2160 * 100) + vh;
            background: url('../../src/assets/title_bk_02@2x.png') center no-repeat;
            background-size: 100% 100%;
            text-align: center;
            margin: (20 / 2160 * 100) + vh auto 1vh;
            // font-family: PingFangSC-Semibold, PingFang SC;
            // line-height: (31 / 2160 * 100) + vh;
            display: flex;
            justify-content: center;
            align-items: center;

            .title {
                font-size: (42 / 3840 * 100) + vw;
                font-family: STSongti-SC-Black, STSongti-SC;
                font-weight: 900;
                color: #FFFFFF;
                // height: (42 / 2160 * 100) + vh;
                // line-height: (42 / 2160 * 100) + vh;
                letter-spacing: (4 / 3840 * 100) + vw;
                background: linear-gradient(180deg, #FFFFFF 0%, #BEEFFF 46%, #35CCFF 100%);
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
            }
        }

        .dialog-wrapper {
            position: fixed;
            width: 100%;
            height: 100%;
            background-color: #000;
            z-index: 101;
            display: flex;
            align-items: center;
            justify-content: center;

            .dialog {
                width: (1100 / 3840 * 100) + vw;
                height: 28vh;
                background-color: #FFF;
                padding: (20 / 2160 * 100) + vh (50 / 3840 * 100) + vw;

                @media (max-width: 891px) {
                    display: flex;
                    flex-direction: column;
                    justify-content: center;

                    @media screen and (orientation:portrait) {
                        width: 60%;
                    }

                    @media screen and (orientation:landscape) {
                        width: 35%;
                        height: 50vh;
                    }
                }

                .title {
                    text-align: center;
                    margin-bottom: (30 / 2160 * 100) + vh;
                    font-size: (70 / 3840 * 100) + vw;

                    @media (max-width: 891px) {

                        @media screen and (orientation:portrait) {
                            font-size: (120 / 3840 * 100) + vw;
                        }

                        @media screen and (orientation:landscape) {
                            margin-bottom: 4vh;
                        }
                    }
                }

                .button-wrapper {
                    text-align: center;
                }
            }
        }

        .contain {
            margin: (160 / 2160 * 100)+ vh (48 / 3840 * 100) + vw;
            // margin: 6vh 0.8vw;
            display: flex;

            .currentData {
                position: absolute;
                color: #fff;
                right: (40 / 2160 * 100)+ vh;
                margin-top: (-50 / 3840 * 100) + vw;
                font-size: (32 / 3840 * 100) + vw;
            }

            .aside-left {
                /*width: (940 / 3840 * 100) + vw;*/
                position: relative;

                button {
                    /*position: absolute;*/
                    top: (-45 / 2160 * 100) + vh;
                    font-size: (18 / 3840 * 100) + vw;
                    padding: (5 / 2160 * 100) + vh (15 / 3840 * 100) + vw;
                    background: #3cafff;
                    color: #ADEDFF;
                    border-radius: (5 / 2160 * 100) + vh;
                    border-width: 0;
                    cursor: pointer;
                }

                .aside-left-location {
                    width: (940 / 3840 * 100) + vw;
                    height: (600 / 2160 * 100) + vh;
                    background: linear-gradient(180deg, rgba(0, 109, 189, 0.05) 0%, rgba(0, 62, 125, 0.15) 100%);
                    border: 1px solid;
                    border-image: linear-gradient(180deg, rgba(0, 165, 255, 0.4), rgba(71, 158, 206, 0), rgba(60, 159, 213, 0), rgba(0, 165, 255, 0.4)) 1 1;

                    .location-contour-wrapper {
                        width: (666 / 3840 * 100) + vw;
                        height: 53%;
                        margin: (70 / 2160 * 100) + vh auto;

                        img {
                            width: 100%;
                            height: 100%;
                        }
                    }

                    .location-details-wrapper {

                        .location-details {
                            margin: (40 / 2160 * 100) + vh (86 / 3840 * 100) + vw;
                            .item-lines{
                                display: flex;
                                justify-content: space-around;
                                margin-bottom: (20 / 2160 * 100) + vh;
                                .context {
                                    font-size: (40 / 3840 * 100) + vw;
                                    font-weight: 600;
                                    color: #71CBFF;
                                    line-height: (50 / 2160 * 100) + vh;
                                    min-width: (155 / 3840 * 100) + vw;
                                    text-align: justify;
                                    text-align-last: justify;
                                }

                                .value {
                                    font-size: (40 / 3840 * 100) + vw;
                                    font-weight: 600;
                                    color: #ADEDFF;
                                    line-height: (50 / 2160 * 100) + vh;
                                    width: (300 / 3840 * 100) + vw;
                                    text-overflow: ellipsis;
                                    overflow: hidden;
                                    white-space: nowrap;
                                }
                            }
                            .item-line {
                                display: flex;

                                .context {
                                    font-size: (26 / 3840 * 100) + vw;
                                    font-weight: 400;
                                    color: #71CBFF;
                                    line-height: (50 / 2160 * 100) + vh;
                                    min-width: (155 / 3840 * 100) + vw;
                                    text-align: justify;
                                    text-align-last: justify;
                                }

                                .value {
                                    font-size: (26 / 3840 * 100) + vw;
                                    font-weight: 400;
                                    color: #ADEDFF;
                                    line-height: (50 / 2160 * 100) + vh;
                                    width: (650 / 3840 * 100) + vw;
                                    text-overflow: ellipsis;
                                    overflow: hidden;
                                    white-space: nowrap;
                                }
                            }
                        }

                    }

                }

                .aside-right-accumulative-transaction-volume {
                    /*width: 100%;*/
                    height: (230 / 2160 * 100) + vh;
                    background: linear-gradient(180deg, rgba(0, 109, 189, 0.05) 0%, rgba(0, 62, 125, 0.15) 100%);
                    border: 1px solid;
                    border-image: linear-gradient(180deg, rgba(0, 165, 255, 0.4), rgba(71, 158, 206, 0), rgba(60, 159, 213, 0), rgba(0, 165, 255, 0.4)) 1 1;
                    margin-top: (30 / 2160 * 100) + vh;

                    .monitor-wrapper {
                        margin: 0 (69 / 3840 * 100) + vw (58 / 2160 * 100) + vh;
                        display: flex;

                        .content-img-wrapper {
                            min-width: (200 / 3840 * 100) + vw;
                            max-width: (200 / 3840 * 100) + vw;
                            height: (113 / 2160 * 100) + vh;
                            background: rgba(4, 47, 83, 0.3);
                            border: 1px solid rgba(3, 139, 255, 1);

                            img {
                                width: 100%;
                                height: 100%;
                            }
                        }

                        .content-data-wrapper {
                            margin-left: (20 / 3840 * 100) + vw;
                            position: relative;
                            width: 100%;
                            display: flex;
                            flex-direction: column;
                            justify-content: center;

                            .item-line-content {
                                display: flex;

                                .context {
                                    font-size: (24 / 3840 * 100) + vw;
                                    font-weight: 400;
                                    color: rgba(113, 203, 255, 1);
                                }

                                .value {
                                    font-size: (24 / 3840 * 100) + vw;
                                    font-weight: 400;
                                    color: rgba(173, 237, 255, 1);
                                }

                            }

                            .status {
                                width: (80 / 3840 * 100) + vw;
                                height: (36 / 2160 * 100) + vh;
                                border-radius: 6px;
                                display: flex;
                                justify-content: center;
                                line-height: (34/2160*100)+vh;
                                color: #FFF;
                                font-size: (26/3840*100)+vw;
                                font-weight: 600;
                                position: absolute;
                                right: 0;
                                top: 0;
                            }

                            .safe-status {
                                background: linear-gradient(180deg, rgba(0, 172, 154, 1) 0%, rgba(0, 126, 111, 1) 100%);
                            }

                            .alert-status {
                                background: linear-gradient(180deg, rgba(255, 101, 68, 1) 0%, rgba(187, 26, 6, 1) 100%);
                            }

                        }

                        .no-data-wrapper {
                            height: (790/2160*100)+vh;
                            width: (700/3840*100)+vw;
                            display: flex;
                            flex-direction: column;
                            justify-content: center;
                            align-items: center;
                            margin-bottom: (-20/2160*100)+vh;

                            .img-wrapper {
                                img {
                                    width: (130/3840*100)+vw;
                                    height: (100/2160*100)+vh;
                                }
                            }

                            .no-data-title {
                                /*margin-top: 12px;*/
                                font-size: (18/3840*100)+vw;
                                font-weight: 400;
                                color: rgba(71, 187, 254, 1);
                            }
                        }

                    }

                    .iot-perception {

                        .item-wrapper {
                            display: flex;
                            width: 33%;
                            justify-content: center;

                            .item {
                                display: flex;
                                flex-direction: column;
                                align-items: center;

                                .status {
                                    align-self: flex-end;
                                    width: (80/3840*100)+vw;
                                    height: (36/2160*100)+vh;
                                    border-radius: 6px;
                                    display: flex;
                                    justify-content: center;
                                    line-height: (34/2160*100)+vh;
                                    color: #FFF;
                                    font-size: (26/3840*100)+vw;
                                    margin-bottom: (7/2160*100)+vh;
                                }

                                .normal-status {
                                    background: linear-gradient(180deg, rgba(0, 172, 154, 1) 0%, rgba(0, 126, 111, 1) 100%);
                                }

                                .alert-status {
                                    background: linear-gradient(180deg, rgba(255, 101, 68, 1) 0%, rgba(187, 26, 6, 1) 100%);
                                }

                                .content {
                                    display: flex;
                                    align-items: center;
                                    margin-bottom: (24/2160*100)+vh;

                                    .img-wrapper {
                                        width: (100/3840*100)+vw;
                                        height: (100/3840*100)+vw;
                                        display: flex;
                                        justify-content: center;
                                        align-items: center;

                                        .img {
                                            width: (60/3840*100)+vw;
                                            height: (60/2160*100)+vh;
                                        }
                                    }

                                    .img-wrapper-0 {
                                        background: url('../assets/icon_chuanganqi@2x.png') center no-repeat;
                                        background-size: 100%;
                                    }

                                    .img-wrapper-1 {
                                        background: url('../assets/icon_shexiangtou@2x.png') center no-repeat;
                                        background-size: 100%;
                                    }

                                    .img-wrapper-2 {
                                        background: url('../assets/icon_shebei@2x.png') center no-repeat;
                                        background-size: 100%;
                                    }

                                    .data-wrapper {
                                        margin-left: (14/3840*100)+vw;

                                        .value-unit {
                                            display: flex;
                                            align-items: flex-end;

                                            .value {
                                                margin-right: (10/3840*100)+vw;
                                                min-width: (65/3840*100)+vw;
                                                font-size: (60/3840*100)+vw;
                                                font-weight: 600;
                                                color: rgba(255, 255, 255, 1);
                                                line-height: (50/2160*100)+vh;
                                            }

                                            .unit {
                                                font-size: (26/3840*100)+vw;
                                                font-weight: 600;
                                                color: rgba(74, 197, 255, 1);
                                                line-height: (35/2160*100)+vh;
                                            }
                                        }

                                        .name {
                                            font-size: (24/3840*100)+vw;
                                            font-weight: 600;
                                            color: rgba(74, 197, 255, 1);
                                            width: (140/3840*100)+vw;
                                            text-overflow: ellipsis;
                                            overflow: hidden;
                                            white-space: nowrap;
                                        }
                                    }
                                }

                                .description-wrapper {
                                    display: flex;

                                    .context {
                                        font-size: (24/3840*100)+vw;
                                        font-weight: 400;
                                        color: rgba(113, 203, 255, 1);
                                    }

                                    .value {
                                        font-size: (24/3840*100)+vw;
                                        font-weight: 400;
                                        color: rgba(173, 237, 255, 1);
                                    }
                                }

                            }
                        }

                        .no-data-wrapper {
                            /*height: 190px;*/
                            /*width: 732px;*/
                            display: flex;
                            flex-direction: column;
                            justify-content: center;
                            align-items: center;
                            margin-top: (24/2160*100)+vh;

                            .img-wrapper {
                                img {
                                    width: (100/3840*100)+vw;
                                    height: (70/2160*100)+vh;
                                }
                            }

                            .no-data-title {
                                /*margin-top: (12/2160*100)+vh;*/
                                font-size: (18/3840*100)+vw;
                                font-weight: 400;
                                color: rgba(71, 187, 254, 1);
                            }
                        }

                    }

                }

                @keyframes all_conatiner_fadeIn {
                    0% {
                        opacity: 0;
                        transform: rotateY(180deg);
                    }
                    100% {
                        opacity: 1;
                        transform: rotateY(0deg);
                    }
                }

                .aside-left-duty-officer {
                    /*width: 100%;*/
                    height: (728/2160*100)+vh;
                    background: linear-gradient(180deg, rgba(0, 109, 189, 0.05) 0%, rgba(0, 62, 125, 0.15) 100%);
                    border: 1px solid;
                    border-image: linear-gradient(180deg, rgba(0, 165, 255, 0.4), rgba(71, 158, 206, 0), rgba(60, 159, 213, 0), rgba(0, 165, 255, 0.4)) 1 1;
                    margin-top: (30/2160*100)+vh;;
                    position: relative;

                    .bk-face {
                        width: (240 / 3840 * 100) + vw;
                        height: (5 / 2160 * 100) + vh;
                        background: linear-gradient(to right,rgba(35,198,198,0.1) 0%,
                                rgba(35,198,198,0.1) 10%,
                                rgba(35,198,200,0.3) 20%,
                                rgba(35,198,200,0.4) 30%,
                                rgba(35,198,200,0.5) 40%,
                                rgba(200,246,246,0.8) 50%,
                                rgba(35,198,200,0.5) 60%,
                                rgba(35,198,200,0.4) 70%,
                                rgba(35,198,200,0.3) 80%,
                                rgba(35,198,198,0.1) 90%,
                                rgba(35,198,198,0.1) 100%);
                        box-shadow: 0px 0px 16px 0px #3DA7FF;
                        border-radius: 2px;
                        position: absolute;
                    }

                    .daka-wraer {
                        background-color: #01a4fe;
                        padding: (10/2160*100)+vh (20/3840*100)+vw;
                        position: absolute;
                        right: (40/3840*100)+vw;
                        margin-top: (-30/2160*100)+vh;
                        color: white;
                    }

                    .peopleStatistics {
                        /*width: 782px;
                        height: 31px;
                        margin: 31px auto;
                        background-size: 100% 100%;
                        text-align: center;
                        font-size: 30px;
                        font-weight: bold;
                        color: #fff;
                        line-height: 10px;*/

                        color: #FFF;
                        margin: 0 auto;
                        display: flex;
                        justify-content: space-around;
                        padding: (30/2160*100)+vh 0 (5/3840*100)+vw;

                        .item {
                            font-size: (27/3840*100)+vw;
                            display: flex;
                            align-items: center;
                            margin-left: (40/3840*100)+vw;

                            .img-wrapper {
                                width: (30/3840*100)+vw;
                                height: (30/2160*100)+vh;

                                img {
                                    width: 100%;
                                    height: 100%;
                                }
                            }

                            span {
                                font-size: (24/3840*100)+vw;
                                margin-left: (10/3840*100)+vw;
                            }
                        }
                    }

                    .monitor-wrapper {
                        margin: (50/2160*100)+vh 4.47vh;
                        display: flex;
                        /*margin: 0vh 1vw;*/
                        perspective: 1000;
                        animation: all_conatiner_fadeIn 2s 1;
                        opacity: 1;
                        transition: 1.5s;
                        transform-style: preserve-3d;

                        .content-img-wrapper {
                            min-width: (200/3840*100)+vw;
                            max-width: (200/3840*100)+vw;
                            height: (113/2160*100)+vh;
                            background: rgba(4, 47, 83, 0.3);
                            border: 1px solid rgba(3, 139, 255, 1);

                            img {
                                width: 100%;
                                height: 100%;
                            }
                        }

                        .content-data-wrapper {
                            margin-left: (20/3840*100)+vw;
                            position: relative;
                            width: 100%;
                            display: flex;
                            flex-direction: column;
                            justify-content: center;

                            .item-line-content {
                                display: flex;

                                .context {
                                    font-size: (24/3840*100)+vw;
                                    font-weight: 400;
                                    color: rgba(113, 203, 255, 1);
                                }

                                .value {
                                    font-size: (24/3840*100)+vw;
                                    font-weight: 400;
                                    color: rgba(173, 237, 255, 1);
                                }

                            }

                            .status {
                                width: (80/3840*100)+vw;
                                height: (36/2160*100)+vh;
                                border-radius: 6px;
                                display: flex;
                                justify-content: center;
                                line-height: (34/2160*100)+vh;
                                color: #FFF;
                                font-size: (26/3840*100)+vw;
                                font-weight: 600;
                                position: absolute;
                                right: 0;
                                top: 0;
                            }

                            .safe-status {
                                background: linear-gradient(180deg, rgba(0, 172, 154, 1) 0%, rgba(0, 126, 111, 1) 100%);
                            }

                            .alert-status {
                                background: linear-gradient(180deg, rgba(255, 101, 68, 1) 0%, rgba(187, 26, 6, 1) 100%);
                            }

                        }

                        .no-data-wrapper {
                            height: (450/2160*100)+vh;
                            width: (940/3840*100)+vw;
                            display: flex;
                            flex-direction: column;
                            justify-content: center;
                            align-items: center;
                            margin-bottom: (-20/2160*100)+vh;

                            .img-wrapper {
                                img {
                                    width: (130/3840*100)+vw;
                                    height: (100/2160*100)+vh;
                                }
                            }

                            .no-data-title {
                                /*margin-top: 12px;*/
                                font-size: (22/3840*100)+vw;
                                font-weight: 400;
                                color: rgba(71, 187, 254, 1);
                            }
                        }

                    }

                    .iot-perception {

                        .item-wrapper {
                            display: flex;
                            width: 33%;
                            justify-content: center;

                            .item {
                                display: flex;
                                flex-direction: column;
                                align-items: center;

                                .status {
                                    align-self: flex-end;
                                    width: (80/3840*100)+vw;
                                    height: (36/2160*100)+vh;
                                    border-radius: 6px;
                                    display: flex;
                                    justify-content: center;
                                    line-height: (34/2160*100)+vh;
                                    color: #FFF;
                                    font-size: (26/3840*100)+vw;
                                    margin-bottom: (7/2160*100)+vh;
                                }

                                .normal-status {
                                    background: linear-gradient(180deg, rgba(0, 172, 154, 1) 0%, rgba(0, 126, 111, 1) 100%);
                                }

                                .alert-status {
                                    background: linear-gradient(180deg, rgba(255, 101, 68, 1) 0%, rgba(187, 26, 6, 1) 100%);
                                }

                                .content {
                                    display: flex;
                                    align-items: center;
                                    margin-bottom: (24/2160*100)+vh;

                                    .img-wrapper {
                                        width: (100/3840*100)+vw;
                                        height: (100/2160*100)+vh;
                                        display: flex;
                                        justify-content: center;
                                        align-items: center;

                                        .img {
                                            width: (60/3840*100)+vw;
                                            height: (60/2160*100)+vh;
                                        }
                                    }

                                    .img-wrapper-0 {
                                        background: url('../assets/icon_chuanganqi@2x.png') center no-repeat;
                                        background-size: 100%;
                                    }

                                    .img-wrapper-1 {
                                        background: url('../assets/icon_shexiangtou@2x.png') center no-repeat;
                                        background-size: 100%;
                                    }

                                    .img-wrapper-2 {
                                        background: url('../assets/icon_shebei@2x.png') center no-repeat;
                                        background-size: 100%;
                                    }

                                    .data-wrapper {
                                        margin-left: (14/3840*100)+vw;

                                        .value-unit {
                                            display: flex;
                                            align-items: flex-end;

                                            .value {
                                                margin-right: (10/3840*100)+vw;
                                                min-width: (65/3840*100)+vw;
                                                font-size: (60/3840*100)+vw;
                                                font-weight: 600;
                                                color: rgba(255, 255, 255, 1);
                                                line-height: (50/2160*100)+vh;
                                            }

                                            .unit {
                                                font-size: (20/3840*100)+vw;
                                                font-weight: 600;
                                                color: rgba(74, 197, 255, 1);
                                                line-height: (35/2160*100)+vh;
                                            }
                                        }

                                        .name {
                                            font-size: (24/3840*100)+vw;
                                            font-weight: 600;
                                            color: rgba(74, 197, 255, 1);
                                        }
                                    }
                                }

                                .description-wrapper {
                                    display: flex;

                                    .context {
                                        font-size: (24/3840*100)+vw;
                                        font-weight: 400;
                                        color: rgba(113, 203, 255, 1);
                                    }

                                    .value {
                                        font-size: (24/3840*100)+vw;
                                        font-weight: 400;
                                        color: rgba(173, 237, 255, 1);
                                    }
                                }

                            }
                        }

                        .no-data-wrapper {
                            height: (190/2160*100)+vh;
                            /*width: 732px;*/
                            display: flex;
                            flex-direction: column;
                            justify-content: center;
                            align-items: center;
                            margin-top: (24/2160*100)+vh;

                            .img-wrapper {
                                img {
                                    width: (130/3840*100)+vw;
                                    height: (100/2160*100)+vh;
                                }
                            }

                            .no-data-title {
                                margin-top: (12/2160*100)+vh;
                                font-size: (22/3840*100)+vw;
                                font-weight: 400;
                                color: rgba(71, 187, 254, 1);
                            }
                        }

                    }

                    .people-detected-data-wrapper {
                        margin-top: (12/2160*100)+vh;

                        //transform: rotateY(-180deg);

                        .people-detected-data {
                            position: relative;

                            .people-detected-compare {
                                display: flex;
                                margin-bottom: (15/2160*100)+vh;

                                .people-detected-title-wrapper {
                                    display: flex;
                                    align-items: center;
                                    margin-left: (40/3840*100)+vw;

                                    .people-detected-title {
                                        width: (24/3840*100)+vw;
                                        font-size: (24/3840*100)+vw;
                                        font-family: PingFangSC-Regular, PingFang SC;
                                        font-weight: 400;
                                        color: rgba(73, 195, 253, 1);
                                        line-height: (39/2160*100)+vh;
                                    }
                                }

                                .people-image-wrapper {
                                    margin: 0 (29/3480*100)+vw 0 (12/3480*100)+vw;

                                    .image-wrapper {
                                        width: (250/3840*100)+vw;
                                        height: (250/2160*100)+vh;
                                        background: url('../../src/assets/pic_frame.png') center no-repeat;
                                        background-size: 100% 100%;
                                        display: flex;
                                        justify-content: center;
                                        align-items: center;

                                        .people-img {
                                            width: (242/3840*100)+vw;
                                            height: (240/2160*100)+vh;
                                        }
                                    }
                                }

                                .people-detected-info-wrapper {

                                    .daka-wraer {
                                        /*background-color: #01a4fe;
                                        padding: 10px 20px;
                                        position: absolute;
                                        right: 40px;
                                        margin-top: -30px;
                                        color: white;
                                        top: -20px;*/

                                        /*background-color: #33cc66;
                                        padding: (7/2160*100)+vh (10/3840*100)+vw;
                                        position: absolute;
                                        right: (10/3840*100)+vw;
                                        color: white;*/
                                        top:(23/2160*100)+vh;

                                        background-color: rgb(12, 115, 47);;
                                        padding: 0.12407vh 0.36042vw;
                                        position: absolute;
                                        right: -2.7958vw;
                                        font-size: 0.3vw;
                                        color: white;
                                    }

                                    .moshengren-wraer {
                                        /*background-color: #01a4fe;
                                        padding: 10px 20px;
                                        position: absolute;
                                        right: 40px;
                                        margin-top: -30px;
                                        color: white;
                                        top: -20px;*/

                                        /*background-color: #33cc66;
                                        padding: (7/2160*100)+vh (10/3840*100)+vw;
                                        position: absolute;
                                        right: (10/3840*100)+vw;
                                        color: white;*/
                                        top:(0/2160*100)+vh;

                                        background-color: #d6381e;
                                        padding: 0.12407vh 0.36042vw;
                                        position: absolute;
                                        right: -2.7958vw;
                                        font-size: 0.3vw;
                                        color: white;
                                    }

                                    .people-detected-info-title {
                                        /* width: (450 / 3840 * 100) + vw;
                                        height: (28 / 2160 * 100) + vh;
                                        line-height: (28 / 2160 * 100) + vh;
                                        background: rgba(1, 164, 254, 1);
                                        padding-left: (3 / 3840 * 100) + vw;
                                        font-size: (14 / 3840 * 100) + vw;
                                        font-family: PingFangSC-Semibold, PingFang SC;
                                        font-weight: 600;
                                        color: rgba(3, 40, 73, 1);
                                        text-overflow: ellipsis;
                                        overflow: hidden;
                                        white-space: nowrap; */

                                        width: (444 / 3840 * 100) + vw;
										height: (39 / 2160 * 100) + vh;
										line-height: (39 / 2160 * 100) + vh;
										background: rgba(0, 55, 88, 1);
										border: 1px solid rgba(1, 164, 254, 1);
										padding-left: (9 / 3840 * 100) + vw;
                                        font-size: 0.625vw;
                                        font-family: PingFangSC-Semibold, PingFang SC;
                                        font-family: MicrosoftYaHei;
                                        font-weight: 600;
                                        color: #e2f3ff;
                                        text-overflow: ellipsis;
                                        overflow: hidden;
                                        white-space: nowrap;
                                    }

                                    .people-detected-info-data {
                                        margin-top: (16/2160*100)+vh;

                                        .people-detected-info {
                                            height: (190/2160*100)+vh;
                                            display: flex;
                                            flex-direction: column;
                                            flex-wrap: wrap;

                                            .people-detected-info-item {
                                                display: flex;
                                                margin-right: (23/3840*100)+vw;
                                                margin-bottom: (20/2160*100)+vh;

                                                .item-key {
                                                    /*width: (140 / 3840 * 100) + vw;*/
                                                    font-size: (24 / 3840 * 100) + vw;
                                                    font-family: PingFangSC-Regular, PingFang SC;
                                                    font-weight: 400;
                                                    color: rgba(73, 195, 253, 1);
                                                    line-height: (35 / 2160 * 100) + vh;
                                                    min-width: 2vw;
                                                    text-align: justify;
                                                    -moz-text-align-last: justify;
                                                    text-align-last: justify;
                                                }

                                                .item-value {
                                                    /*width: (130 / 3840 * 100) + vw;*/
                                                    font-size: (24 / 3840 * 100) + vw;
                                                    font-family: PingFangSC-Semibold, PingFang SC;
                                                    font-weight: 600;
                                                    color: rgba(226, 243, 255, 1);
                                                    line-height: (35 / 2160 * 100) + vh;
                                                    width: 4.5vw;
                                                    text-overflow: ellipsis;
                                                    overflow: hidden;
                                                    white-space: nowrap;
                                                }
                                            }
                                        }
                                    }
                                }
                            }

                            .acquire-images {

                                .item-value {
                                    width: (350 / 3840 * 100) + vw !important;
                                    text-overflow: ellipsis;
                                    overflow: hidden;
                                    white-space: nowrap;
                                }
                            }

                            .acquire-images {
                            }

                            .local-database {
                                .people-detected-info-wrapper {
                                    position: relative;
                                    top: (42/2160*100)+vh;
                                }
                            }

                            .contrast-fit {
                                position: absolute;
                                top: 50%;
                                right: (-30/3840*100)+vw;
                                margin-top: (-30/2160*100)+vh;

                                .contrast-fit-wrapper {
                                    width: (500/3840*100)+vw;
                                    height: (59/2160*100)+vh;
                                    background: url('../../src/assets/bk_tuli@2x.png') center no-repeat;
                                    background-size: 100% 100%;

                                    .contrast-fit-data {
                                        display: flex;
                                        height: (59/2160*100)+vh;
                                        align-items: center;
                                        justify-content: center;

                                        .energy-tank-wrapper {
                                            width: (320/3840*100)+vw;
                                            height: (28/2160*100)+vh;
                                            line-height: (28/2160*100)+vh;
                                            border: 1px solid;
                                            display: flex;
                                            /* align-items: center; */
                                            border-image: linear-gradient(180deg, rgba(0, 165, 255, 0.4), rgba(71, 158, 206, 0), rgba(60, 159, 213, 0), rgba(0, 165, 255, 0.4)) 1 1;
                                            box-sizing: border-box;
                                            padding-left: (2/3840*100)+vw;
                                            padding-top: (1/2160*100)+vh;
                                            .energy-tank {
                                                height: (24/2160*100)+vh;

                                                .energy-tank-item {
                                                    overflow: hidden;

                                                    img {
                                                        width: (315/3840*100)+vw;
                                                        height: (24/2160*100)+vh;
                                                    }
                                                }
                                            }
                                        }

                                        .contrast-fit-value-item {
                                            margin-left: (10/3840*100)+vw;

                                            .contrast-fit-context {
                                                font-size: (12/3840*100)+vw;
                                                font-family: PingFangSC-Semibold, PingFang SC;
                                                font-weight: 600;
                                                color: rgba(73, 195, 253, 1);
                                            }

                                            .contrast-fit-value {
                                                font-size: (22/3840*100)+vw;
                                                font-family: PingFangSC-Semibold, PingFang SC;
                                                font-weight: 600;
                                                color: rgba(226, 243, 255, 1);
                                            }
                                        }
                                    }
                                }
                            }
                        }
                    }

                    .people-detected-data-wrapper_true {
                        margin-top: (40/2160*100)+vh;

                        //transform: rotateY(-180deg);

                        .people-detected-data {
                            position: relative;

                            .people-detected-compare {
                                display: flex;
                                margin-bottom: (55/2160*100)+vh;

                                .people-detected-title-wrapper {
                                    display: flex;
                                    align-items: center;
                                    margin-left: (40/3840*100)+vw;

                                    .people-detected-title {
                                        width: (24/3840*100)+vw;
                                        font-size: (24/3840*100)+vw;
                                        font-family: PingFangSC-Regular, PingFang SC;
                                        font-weight: 400;
                                        color: rgba(73, 195, 253, 1);
                                        line-height: (39/2160*100)+vh;
                                    }
                                }

                                .people-image-wrapper {
                                    margin: 0 (29/3480*100)+vw 0 (12/3480*100)+vw;

                                    .image-wrapper {
                                        width: (250/3840*100)+vw;
                                        height: (250/2160*100)+vh;
                                        background: url('../../src/assets/pic_frame.png') center no-repeat;
                                        background-size: 100% 100%;
                                        display: flex;
                                        justify-content: center;
                                        align-items: center;

                                        .people-img {
                                            width: (242/3840*100)+vw;
                                            height: (240/2160*100)+vh;
                                        }
                                    }
                                }

                                .people-detected-info-wrapper {

                                    .daka-wraer {
                                        /*background-color: #01a4fe;
                                        padding: 10px 20px;
                                        position: absolute;
                                        right: 40px;
                                        margin-top: -30px;
                                        color: white;
                                        top: -20px;*/

                                        /*background-color: #33cc66;
                                        padding: (7/2160*100)+vh (10/3840*100)+vw;
                                        position: absolute;
                                        right: (10/3840*100)+vw;
                                        color: white;*/
                                        top:(23/2160*100)+vh;

                                        background-color: rgb(12, 115, 47);;
                                        padding: 0.12407vh 0.36042vw;
                                        position: absolute;
                                        right: -2.73958vw;
                                        font-size: 0.3vw;
                                        color: white;
                                    }

                                    .people-detected-info-title {
                                        /* width: (450 / 3840 * 100) + vw;
                                        height: (28 / 2160 * 100) + vh;
                                        line-height: (28 / 2160 * 100) + vh;
                                        background: rgba(1, 164, 254, 1);
                                        padding-left: (3 / 3840 * 100) + vw;
                                        font-size: (14 / 3840 * 100) + vw;
                                        font-family: PingFangSC-Semibold, PingFang SC;
                                        font-weight: 600;
                                        color: rgba(3, 40, 73, 1);
                                        text-overflow: ellipsis;
                                        overflow: hidden;
                                        white-space: nowrap; */

                                        width: (444 / 3840 * 100) + vw;
                                        height: (39 / 2160 * 100) + vh;
                                        line-height: (39 / 2160 * 100) + vh;
                                        background: rgba(0, 55, 88, 1);
                                        border: 1px solid rgba(1, 164, 254, 1);
                                        padding-left: (9 / 3840 * 100) + vw;
                                        font-size: 0.625vw;
                                        font-family: PingFangSC-Semibold, PingFang SC;
                                        font-family: MicrosoftYaHei;
                                        font-weight: 600;
                                        color: #e2f3ff;
                                        text-overflow: ellipsis;
                                        overflow: hidden;
                                        white-space: nowrap;
                                    }

                                    .people-detected-info-data {
                                        margin-top: (16/2160*100)+vh;

                                        .people-detected-info {
                                            height: (190/2160*100)+vh;
                                            display: flex;
                                            flex-direction: column;
                                            flex-wrap: wrap;

                                            .people-detected-info-item {
                                                display: flex;
                                                margin-right: (23/3840*100)+vw;
                                                margin-bottom: (20/2160*100)+vh;
                                                height: (39 / 2160 * 100) + vh;

                                                .item-key {
                                                    /*width: (140 / 3840 * 100) + vw;*/
                                                    font-size: (24 / 3840 * 100) + vw;
                                                    font-family: PingFangSC-Regular, PingFang SC;
                                                    font-weight: 400;
                                                    color: rgba(73, 195, 253, 1);
                                                    line-height: (35 / 2160 * 100) + vh;
                                                    min-width: 2vw;
                                                    text-align: justify;
                                                    -moz-text-align-last: justify;
                                                    text-align-last: justify;
                                                }

                                                .item-value {
                                                    /*width: (130 / 3840 * 100) + vw;*/
                                                    font-size: (24 / 3840 * 100) + vw;
                                                    font-family: PingFangSC-Semibold, PingFang SC;
                                                    font-weight: 600;
                                                    color: rgba(226, 243, 255, 1);
                                                    line-height: (35 / 2160 * 100) + vh;
                                                    width: 4.5vw;
                                                    text-overflow: ellipsis;
                                                    overflow: hidden;
                                                    white-space: nowrap;
                                                }
                                            }
                                        }
                                    }
                                }
                            }

                            .acquire-images {

                                .item-value {
                                    width: (350 / 3840 * 100) + vw !important;
                                    text-overflow: ellipsis;
                                    overflow: hidden;
                                    white-space: nowrap;
                                }
                            }

                            .acquire-images {
                            }

                            .local-database {
                                .people-detected-info-wrapper {
                                    position: relative;
                                    top: (24/2160*100)+vh;
                                }
                            }

                            .contrast-fit {
                                position: absolute;
                                top: 50%;
                                right: (-30/3840*100)+vw;
                                margin-top: (-30/2160*100)+vh;

                                .contrast-fit-wrapper {
                                    width: (500/3840*100)+vw;
                                    height: (59/2160*100)+vh;
                                    background: url('../../src/assets/bk_tuli@2x.png') center no-repeat;
                                    background-size: 100% 100%;

                                    .contrast-fit-data {
                                        display: flex;
                                        height: (59/2160*100)+vh;
                                        align-items: center;
                                        justify-content: center;

                                        .energy-tank-wrapper {
                                            width: (320/3840*100)+vw;
                                            height: (28/2160*100)+vh;
                                            line-height: (28/2160*100)+vh;
                                            border: 1px solid;
                                            display: flex;
                                            /* align-items: center; */
                                            border-image: linear-gradient(180deg, rgba(0, 165, 255, 0.4), rgba(71, 158, 206, 0), rgba(60, 159, 213, 0), rgba(0, 165, 255, 0.4)) 1 1;
                                            box-sizing: border-box;
                                            padding-left: (2/3840*100)+vw;
                                            padding-top: (1/2160*100)+vh;
                                            .energy-tank {
                                                height: (24/2160*100)+vh;

                                                .energy-tank-item {
                                                    overflow: hidden;

                                                    img {
                                                        width: (315/3840*100)+vw;
                                                        height: (24/2160*100)+vh;
                                                    }
                                                }
                                            }
                                        }

                                        .contrast-fit-value-item {
                                            margin-left: (10/3840*100)+vw;

                                            .contrast-fit-context {
                                                font-size: (12/3840*100)+vw;
                                                font-family: PingFangSC-Semibold, PingFang SC;
                                                font-weight: 600;
                                                color: rgba(73, 195, 253, 1);
                                            }

                                            .contrast-fit-value {
                                                font-size: (22/3840*100)+vw;
                                                font-family: PingFangSC-Semibold, PingFang SC;
                                                font-weight: 600;
                                                color: rgba(226, 243, 255, 1);
                                            }
                                        }
                                    }
                                }
                            }
                        }
                    }

                }

                .aside-left-inspection-event {
                    height: (298/2160*100)+vh;
                    background: linear-gradient(180deg, rgba(0, 109, 189, 0.05) 0%, rgba(0, 62, 125, 0.15) 100%);
                    border: 1px solid;
                    border-image: linear-gradient(180deg, rgba(0, 165, 255, 0.4), rgba(71, 158, 206, 0), rgba(60, 159, 213, 0), rgba(0, 165, 255, 0.4)) 1 1;
                    margin-top: (30/2160*100)+vh;;

                    .monitor-wrapper {
                        margin: 0 (69/3840*100)+vw (58/2160*100)+vh;
                        /*display: flex;*/
                        position: relative;

                        .img_gaojing{
                            position: absolute;
                            right: (20/3840*100)+vw;
                            color: white;
                            top: (-30/2160*100)+vh;

                            img {
                               /* width: (64/3840*100)+vw;*/
                                height: (64/2160*100)+vh;
                                width: 1.66667vw;
                                height: 6.06296vh;
                                margin: 0 0.5vh;
                            }
                        }

                        .content-img-wrapper {
                            min-width: (200/3840*100)+vw;
                            max-width: (200/3840*100)+vw;
                            height: (113/2160*100)+vh;
                            background: rgba(4, 47, 83, 0.3);
                            border: 1px solid rgba(3, 139, 255, 1);

                            img {
                                width: 100%;
                                height: 100%;
                            }
                        }

                        .content-data-wrapper {
                            margin-left: (20/3840*100)+vw;
                            position: relative;
                            width: 100%;
                            display: flex;
                            flex-direction: column;
                            justify-content: center;

                            .item-line-content {
                                display: flex;
                                align-content: center;
                                margin-top: (30/2160*100)+vh;

                                .context {
                                    font-size: (30 / 3840 * 100) + vw;
                                    font-weight: 400;
                                    color: rgba(113, 203, 255, 1);
                                    min-width: 4.5vw;
                                }

                                .title-value {
                                    white-space: nowrap;
                                    text-overflow: ellipsis;
                                    width: (600 / 3840 * 100) + vw;
                                    overflow: hidden;
                                }

                                .value {
                                    font-size: (30 / 3840 * 100) + vw;
                                    font-weight: 400;
                                    color: rgba(173, 237, 255, 1);
                                }

                            }

                            .status {
                                margin-top: (120/2160*100)+vh;
                                width: (120/3840*100)+vw;
                                height: (54/2160*100)+vh;
                                border-radius: 6px;
                                display: flex;
                                justify-content: center;
                                line-height: (50/2160*100)+vh;
                                color: #FFF;
                                font-size: (26/3840*100)+vw;
                                font-weight: 600;
                                position: fixed;
                                right: 0;
                                top: 0;
                            }

                            .safe-status {
                                background: linear-gradient(180deg, rgba(0, 172, 154, 1) 0%, rgba(0, 126, 111, 1) 100%);
                            }

                            .alert-status {
                                background: linear-gradient(180deg, rgba(255, 101, 68, 1) 0%, rgba(187, 26, 6, 1) 100%);
                            }

                        }

                        .no-data-wrapper {
                            /*height: 680px;*/
                            /*width: 732px;*/
                            display: flex;
                            flex-direction: column;
                            justify-content: center;
                            align-items: center;
                            margin-bottom: (-20/2160*100)+vh;

                            .img-wrapper {
                                img {
                                    width: (130/3840*100)+vw;
                                    height: (100/2160*100)+vh;
                                }
                            }

                            .no-data-title {
                                /*margin-top: 12px;*/
                                font-size: (22/3840*100)+vw;
                                font-weight: 400;
                                color: rgba(71, 187, 254, 1);
                            }
                        }

                    }

                    .iot-perception {

                        .item-wrapper {
                            /*display: flex;*/
                            width: 33%;
                            justify-content: center;

                            .item {
                                display: flex;
                                flex-direction: column;
                                align-items: center;

                                .status {
                                    align-self: flex-end;
                                    width: (80/3840*100)+vw;
                                    height: (36/2160*100)+vh;
                                    border-radius: 6px;
                                    /*display: flex;*/
                                    justify-content: center;
                                    line-height: (34/2160*100)+vh;
                                    color: #FFF;
                                    font-size: (26/3840*100)+vw;
                                    margin-bottom: (7/2160*100)+vh;
                                }

                                .normal-status {
                                    background: linear-gradient(180deg, rgba(0, 172, 154, 1) 0%, rgba(0, 126, 111, 1) 100%);
                                }

                                .alert-status {
                                    background: linear-gradient(180deg, rgba(255, 101, 68, 1) 0%, rgba(187, 26, 6, 1) 100%);
                                }

                                .content {
                                    display: flex;
                                    align-items: center;
                                    margin-bottom: (24/2160*100)+vh;

                                    .img-wrapper {
                                        width: (100/3840*100)+vw;
                                        height: (100/2160*100)+vh;
                                        display: flex;
                                        justify-content: center;
                                        align-items: center;

                                        .img {
                                            width: (60/3840*100)+vw;
                                            height: (60/2160*100)+vh;
                                        }
                                    }

                                    .img-wrapper-0 {
                                        background: url('../assets/icon_chuanganqi@2x.png') center no-repeat;
                                        background-size: 100%;
                                    }

                                    .img-wrapper-1 {
                                        background: url('../assets/icon_shexiangtou@2x.png') center no-repeat;
                                        background-size: 100%;
                                    }

                                    .img-wrapper-2 {
                                        background: url('../assets/icon_shebei@2x.png') center no-repeat;
                                        background-size: 100%;
                                    }

                                    .data-wrapper {
                                        margin-left: (14/3840*100)+vw;

                                        .value-unit {
                                            display: flex;
                                            align-items: flex-end;

                                            .value {
                                                margin-right: (10/3840*100)+vw;
                                                min-width: (65/3840*100)+vw;
                                                font-size: (60/3840*100)+vw;
                                                font-weight: 600;
                                                color: rgba(255, 255, 255, 1);
                                                line-height: (50/2160*100)+vh;
                                            }

                                            .unit {
                                                font-size: (20/3840*100)+vw;
                                                font-weight: 600;
                                                color: rgba(74, 197, 255, 1);
                                                line-height: (35/2160*100)+vh;
                                            }
                                        }

                                        .name {
                                            font-size: (24/3840*100)+vw;
                                            font-weight: 600;
                                            color: rgba(74, 197, 255, 1);
                                        }
                                    }
                                }

                                .description-wrapper {
                                    display: flex;

                                    .context {
                                        font-size: (24/3840*100)+vw;
                                        font-weight: 400;
                                        color: rgba(113, 203, 255, 1);
                                    }

                                    .value {
                                        font-size: (24/3840*100)+vw;
                                        font-weight: 400;
                                        color: rgba(173, 237, 255, 1);
                                    }
                                }

                            }
                        }

                        .no-data-wrapper {
                            height: (190/2160*100)+vh;
                            /*width: 732px;*/
                            display: flex;
                            flex-direction: column;
                            justify-content: center;
                            align-items: center;
                            margin-top: (24/2160*100)+vh;

                            .img-wrapper {
                                img {
                                    width: (130/3840*100)+vw;
                                    height: (100/2160*100)+vh;
                                }
                            }

                            .no-data-title {
                                margin-top: (12/2160*100)+vh;
                                font-size: (22/3840*100)+vw;
                                font-weight: 400;
                                color: rgba(71, 187, 254, 1);
                            }
                        }

                    }

                }
            }

            .content-main {
                margin-left: (30/3840*100)+vw;

                .content-main-asset-data {
                    display: flex;
                    width: (1824/3840*100)+vw;
                    height: (265/2160*100)+vh;
                    background: linear-gradient(180deg, rgba(0, 109, 189, 0.05) 0%, rgba(0, 62, 125, 0.15) 100%);
                    border: 1px solid;
                    border-image: linear-gradient(180deg, rgba(0, 165, 255, 0.4), rgba(71, 158, 206, 0), rgba(60, 159, 213, 0), rgba(0, 165, 255, 0.4)) 1 1;
                    box-sizing: border-box;
                    padding: (40/2160*100)+vh (62/3840*100)+vw;

                    .item-content-wrapper {
                        width: 100%;

                        .item-content-line-1 {
                            display: flex;

                            .item-content {
                                display: flex;
                                align-items: center;
                                min-width: (580/3840*100)+vw;

                                .context {
                                    font-size: (28/3840*100)+vw;
                                    font-weight: 600;
                                    color: rgba(113, 203, 255, 1);
                                    margin-bottom: 0.5vw;
                                }

                                .value {
                                    font-size: (28/3840*100)+vw;
                                    font-weight: 400;
                                    color: rgba(173, 237, 255, 1);
                                    margin-bottom: 0.5vw;
                                }

                                &:nth-child(1) {
                                    flex: 4;
                                }

                                &:nth-child(2) {
                                    flex: 4;

                                    .value {
                                        font-size: (28/3840*100)+vw;
                                        /*color: rgba(255, 255, 255, 1);*/
                                        color: rgba(173, 237, 255, 1);
                                        position: relative;
                                        /*top: (-6/2160*100)+vh;*/
                                        margin-bottom: 0.5vw;
                                    }
                                }
                            }
                        }

                        .item-content-line-2 {
                            display: flex;
                            /*justify-content: space-between;*/
                            margin-top: (10/2160*100)+vh;

                            .item-content-column-wrapper {

                                .item-content {
                                    display: flex;
                                    align-items: center;
                                    height: (50/2160*100)+vh;
                                    min-width: (630/3840*100)+vw;

                                    .context-left {
                                        display: flex;
                                    }

                                    .context {
                                        font-size: (28/3840*100)+vw;
                                        font-weight: 600;
                                        color: rgba(113, 203, 255, 1);
                                        min-width: (80/3840*100)+vw;
                                    }

                                    .value {
                                        font-size: (28/3840*100)+vw;
                                        font-weight: 400;
                                        color: rgba(173, 237, 255, 1);
                                        width: (290/3840*100)+vw;
                                        text-overflow: ellipsis;
                                        overflow: hidden;
                                        white-space: nowrap;
                                    }
                                }

                                .item-content-status {
                                    min-width: (630/3840*100)+vw;
                                    /*justify-content: space-between;*/

                                    .status {
                                        width: (80/3840*100)+vw;
                                        height: (36/2160*100)+vh;
                                        background: linear-gradient(180deg, rgba(255, 101, 68, 1) 0%, rgba(187, 26, 6, 1) 100%);
                                        border-radius: 6px;
                                        text-align: center;
                                        line-height: (36/2160*100)+vh;
                                        color: #FFF;
                                        font-size: (28/3840*100)+vw;
                                        margin-left: (15/3840*100)+vw;
                                    }

                                    .status.safe {
                                        background: linear-gradient(180deg, rgba(0, 172, 154, 1) 0%, rgba(0, 126, 111, 1) 100%);
                                    }

                                    .status.alert {
                                        background: linear-gradient(180deg, rgba(255, 101, 68, 1) 0%, rgba(187, 26, 6, 1) 100%);
                                    }

                                }

                                &:last-child {
                                    margin-right: 0;
                                    margin-left: (40/3840*100)+vw;

                                    .value {
                                        width: (390/3840*100)+vw;
                                    }
                                }
                            }
                        }

                    }
                }

                .content-main-transaction-dynamic {
                    width: (1820/3840*100)+vw;
                    height: (900/2160*100)+vh;
                    background: linear-gradient(180deg, rgba(0, 109, 189, 0.05) 0%, rgba(0, 62, 125, 0.15) 100%);
                    border: 1px solid;
                    border-image: linear-gradient(180deg, rgba(0, 165, 255, 0.4), rgba(71, 158, 206, 0), rgba(60, 159, 213, 0), rgba(0, 165, 255, 0.4)) 1 1;
                    margin-top: (30/2160*100)+vh;

                    .dev-title {
                        display: flex;
                        margin: 0.5vh auto;
                        text-align: center;
                        justify-content: center;
                        align-items: center;

                        .title {
                            font-size: (42 / 3840 * 100) + vw;
                            font-family: STSongti-SC-Black, STSongti-SC;
                            font-weight: 900;
                            color: #FFFFFF;
                            // height: (42 / 2160 * 100) + vh;
                            // line-height: (42 / 2160 * 100) + vh;
                            letter-spacing: (4 / 3840 * 100) + vw;
                            background: linear-gradient(180deg, #FFFFFF 0%, #BEEFFF 46%, #35CCFF 100%);
                            -webkit-background-clip: text;
                            -webkit-text-fill-color: transparent;
                            white-space:nowrap;
                            margin: 0 4vh;
                        }

                        .title-img {
                            height: (31 / 2160 * 100) + vh;

                            .img {
                                width: 8vw;
                                height: (31 / 2160 * 100) + vh;
                            }

                            .img.scaleX-img {
                                transform: scaleX(-1);
                            }
                        }
                    }


                    .date-time-wrapper {
                        font-size: (28/3840*100)+vw;
                        font-weight: 400;
                        color: rgba(113, 203, 255, 1);
                        line-height: (40/2160*100)+vh;
                        text-align: center;
                    }

                    .monitor-video-wrapper {
                        width: (1640/3840*100)+vw;
                        height: (740/2160*100)+vh;
                        margin: 0 auto;
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                        justify-content: center;
                        position: relative;

                        .top-list {
                            width: (1820/3840*100)+vw;
                            height: (740/2160*100)+vh;
                            .top-head {
                                width: (1820/3840*100)+vw;
                                height: (900/2160/5*100)+vh;
                                font-size: (38/3840*100)+vw;
                                color: #FFFFFF;
                                display: flex;
                                justify-content: space-around;
                                align-items: center;
                                .top-item {
                                    text-align: center;
                                    &:nth-child(1) {
                                        width: (500/3840*100)+vw;
                                    }
                                    &:nth-child(2) {
                                        width: (500/3840*100)+vw;
                                    }
                                    &:nth-child(3) {
                                        width: (500/3840*100)+vw;
                                    }
                                    &:nth-child(4) {
                                        width: (500/3840*100)+vw;
                                    }
                                    &:nth-child(5) {
                                        width: (500/3840*100)+vw;
                                    }
                                }
                            }
                            .top-body {
                                .line {
                                    display: flex;
                                    justify-content: space-around;
                                    align-items: center;
                                    width: (1820/3840*100)+vw;
                                    height: (800/2160/5*100)+vh;
                                    border-top: (5/3840*100)+vw solid #4F94CD;
                                    &:last-child {
                                        border-bottom: (5/3840*100)+vw solid #4F94CD;
                                    }
                                    .line-item {
                                        text-align: center;
                                        color: #ffffff;
                                        font-size: (36/3840*100)+vw;
                                        &:nth-child(1) {
                                            width: (500/3840*100)+vw;
                                        }
                                        &:nth-child(2) {
                                            width: (500/3840*100)+vw;
                                        }
                                        &:nth-child(3) {
                                            width: (500/3840*100)+vw;
                                        }
                                        &:nth-child(4) {
                                            width: (500/3840*100)+vw;
                                        }
                                        &:nth-child(5) {
                                            width: (500/3840*100)+vw;
                                        }
                                    }
                                }
                            }
                        }
                        .border-base-0 {
                            width: (1640/3840*100)+vw;
                            height: (420/2160*100)+vh;
                            border: (4/3840*100)+vw solid rgba(15, 90, 143, 1);
                            position: absolute;
                            box-sizing: border-box;
                        }

                        .border-base-1 {
                            width: (1520/3840*100)+vw;
                            height: (520/2160*100)+vh;
                            border: (4/3840*100)+vw solid rgba(31, 126, 192, 1);
                            position: absolute;
                            box-sizing: border-box;
                        }

                        .border-base-2 {
                            width: (1400/3840*100)+vw;
                            height: (620/2160*100)+vh;
                            border: (5/3840*100)+vw solid rgba(60, 175, 255, 1);
                            position: absolute;
                            box-sizing: border-box;
                        }

                        @keyframes video_fadeIn {
                            0% {
                                // opacity: 0;
                                transform: translateX((100/3840*100)+vw);
                            }
                            100% {
                                // opacity: 1;
                                transform: translateX(0);
                            }
                        }

                        .video {
                            width: (1280/3840*100)+vw;
                            height: (720/2160*100)+vh;
                            border: (10/3840*100)+vw solid rgba(60, 175, 255, 1);
                            position: relative;
                            box-sizing: border-box;
                            background-color: rgba(0,0,0,0.7);

                            img {
                                width: (1260/3840*100)+vw;
                                height: (700/2160*100)+vh;
                            }

                            .video-wrapper {
                                overflow: hidden;
                                width: (1260/3840*100)+vw;
                                height: (700/2160*100)+vh;

                                .video-content {
                                    animation: video_fadeIn 0.5s 1;
                                }
                            }
                        }

                    }

                }

                .content-main-transaction-up-chain {
                    width: (1820/3840*100)+vw;
                    height: (730/2160*100)+vh;
                    background: linear-gradient(180deg, rgba(0, 109, 189, 0.05) 0%, rgba(0, 62, 125, 0.15) 100%);
                    border: 1px solid;
                    border-image: linear-gradient(180deg, rgba(0, 165, 255, 0.4), rgba(71, 158, 206, 0), rgba(60, 159, 213, 0), rgba(0, 165, 255, 0.4)) 1 1;
                    margin-top: (30/2160*100)+vh;

                    .transaction-up-chain {

                        .block-height-contract-calls {
                            display: flex;
                            justify-content: space-between;
                            margin-top: (45/2160*100)+vh;
                            padding: (0/2160*100)+vh (172/3840*100)+vw;

                            .block-height {
                                display: flex;
                                align-items: center;
                                width: (500/3840*100)+vw;

                                .context {
                                    font-size: (36/3840*100)+vw;
                                    color: #FFF;
                                }

                                .value {
                                    font-size: (58/3840*100)+vw;
                                    color: #FFF;
                                    margin-left: (50/3840*100)+vw;
                                }
                            }

                            .contract-calls {
                                display: flex;
                                align-items: center;
                                /*margin: 0 50px;*/
                                color: white;
                                position: relative;
                                left: (12/3840*100)+vw;

                                .context {
                                    font-size: (36/3840*100)+vw;
                                    color: #FFF;
                                    margin-right: (20/3840*100)+vw;
                                }

                                .value {
                                    font-size: (58/3840*100)+vw;
                                    z-index: 1;
                                    /*letter-spacing: 12px;*/
                                    font-family: initial;
                                    margin-left: (20/3840*100)+vw;
                                }

                                .digital-bg-img {
                                    position: absolute;
                                    right: (12/3840*100)+vw;
                                    z-index: 0;
                                    height: (48/2160*100)+ vh;

                                    img {
                                        width: (30/3840*100)+vw;
                                        height: (48/2160*100)+vh;
                                        margin-left: (9/3840*100)+vw;
                                    }
                                }

                            }
                        }

                        .transaction-up-chain-wrapper {
                            display: flex;
                            justify-content: space-around;

                            .content-item-wrapper {
                                display: flex;
                                position: relative;
                                /* left: -90px; */
                                width: (1575/3840*100)+vw;
                                overflow: hidden;

                                .content-item-container {
                                    display: flex;
                                    /* overflow: hidden; */
                                    transition: all 512ms ease-in 0s;
                                    // transform: translate(-256px);

                                    @keyframes block_chain_fadeIn {
                                        0% {
                                            transform: translateY(-300px);
                                            opacity: 0;
                                        }
                                        50% {
                                            transform: translateY(-100px);
                                            // opacity: 0.5;
                                        }
                                        100% {
                                            transform: translateY(0px);
                                            opacity: 1;
                                        }
                                    }

                                    .content-item-block-chain-move {
                                        // animation: block_chain_fadeIn 0.1s ease-out 0s;

                                        /*animation: block_chain_fadeIn 1.24s ease-out 0s;*/

                                        .img-wrapper {
                                            .block-chain-img {
                                                /*animation: block_chain_fadeIn11 1.45s ease-out 0s;*/
                                            }
                                        }
                                    }

                                    .content-item {
                                        margin-top: (38/2160*100)+vh;
                                        text-align: center;
                                        margin-right: (20/3840*100)+vw;
                                        transition: all 512ms ease-in 0s;

                                        .block-height-key {
                                            font-size: (35/3840*100)+vw;
                                            font-weight: 600;
                                            color: rgba(71, 187, 254, 1);
                                            width: (246/3840*100)+vw;
                                            white-space: nowrap;
                                            text-overflow: ellipsis;
                                            overflow: hidden;
                                        }

                                        .block-height-value {
                                            font-size: (35/3840*100)+vw;
                                            width: (246/3840*100)+vw;
                                            white-space: nowrap;
                                            text-overflow: ellipsis;
                                            overflow: hidden;
                                            color: #fff;
                                        }

                                        .up-chain-number-key {
                                            font-size: (35/3840*100)+vw;
                                            font-weight: 600;
                                            color: rgba(71, 187, 254, 1);
                                            width: (246/3840*100)+vw;
                                            white-space: nowrap;
                                            text-overflow: ellipsis;
                                            overflow: hidden;
                                        }

                                        .up-chain-number-value {
                                            color: #00ffbf;
                                            font-size: (35/3840*100)+vw;
                                            width: (246/3840*100)+vw;
                                            text-overflow: ellipsis;
                                            overflow: hidden;
                                        }

                                        .img-wrapper {
                                            margin: (28/2160*100)+vh 0 (19/2160*100)+vh 0;
                                            /*margin: 0.2963vh 0 0.2963vh 0;*/
                                            position: relative;
                                        }

                                        .img-wrapper .block-chain-img {
                                            width: (140/3840*100)+vw;
                                            height: (190/2160*100)+vh;
                                        }

                                    }

                                    .no-data-wrapper {
                                        height: (500/2160*100)+vh;
                                        width: (1555/3840*100)+vw;
                                        display: flex;
                                        flex-direction: column;
                                        justify-content: center;
                                        align-items: center;

                                        .img-wrapper {
                                            img {
                                                width: (200/3840*100)+vw;
                                                height: (160/2160*100)+vh;
                                            }
                                        }

                                        .no-data-title {
                                            margin-top: (12/2160*100)+vh;
                                            font-size: (32/3840*100)+vw;
                                            font-weight: 400;
                                            color: rgba(71, 187, 254, 1);
                                        }
                                    }

                                    @keyframes block_chain_fadeIn_blockItem {
                                        0% {
                                            /*transform: scale(1.5);*/
                                            opacity: 0;
                                        }
                                        50% {
                                            /*transform: scale(1.5);*/
                                            opacity: 0;
                                        }
                                        100% {
                                            /*transform: scale(1);*/
                                            opacity: 1;
                                        }
                                    }

                                    @keyframes block_chain_fadeIn_blockItem_img {
                                        0% {
                                            /*transform: scale(1.5);*/
                                            opacity: 0;
                                        }
                                        50% {
                                            transform: scale(1.5);
                                            opacity: 0;
                                        }
                                        100% {
                                            transform: scale(1);
                                            opacity: 1;
                                        }
                                    }

                                    .content-item.block-item-flag {
                                        transition: all 512ms ease-in 0s;
                                        animation: block_chain_fadeIn_blockItem 1.5s ease-out 0s;

                                        .block-chain-img {
                                            animation: block_chain_fadeIn_blockItem_img 1.25s ease-out 0s;
                                        }
                                    }

                                    .content-item .img-wrapper .img-arrow-wrapper {
                                        position: absolute;
                                        top: 50%;
                                        left: (-40/3840*100)+vw;
                                        margin-top: (-25/2160*100)+vh;
                                        display: flex;
                                    }

                                    .content-item .img-wrapper .img-arrow-wrapper .img-arrow {
                                        width: (23/3840*100)+vw;
                                        height: (33/2160*100)+vh;
                                    }

                                    @keyframes arrowOpacityDraw {
                                        /*定义关键帧、scaleDrew是需要绑定到选择器的关键帧名称*/
                                        0% {
                                            opacity: 0.2;
                                            /*opacity: 1;*/
                                        }
                                        50% {
                                            opacity: 1;
                                            /*opacity: 0.2;*/
                                        }
                                        100% {
                                            opacity: 0.2;
                                            /*opacity: 1;*/
                                        }
                                    }

                                    .content-item .img-wrapper .img-arrow-wrapper .opacity-icon-arrow {
                                        -webkit-animation-name: arrowOpacityDraw; /*关键帧名称*/
                                        -moz-animation-name: arrowOpacityDraw;
                                        -o-animation-name: arrowOpacityDraw;
                                        animation-name: arrowOpacityDraw;
                                        -webkit-animation-timing-function: ease-in-out; /*动画的速度曲线*/
                                        -moz-animation-timing-function: ease-in-out;
                                        -o-animation-timing-function: ease-in-out;
                                        animation-timing-function: ease-in-out;
                                        -webkit-animation-iteration-count: infinite; /*动画播放的次数*/
                                        -moz-animation-iteration-count: infinite;
                                        -o-animation-iteration-count: infinite;
                                        animation-iteration-count: infinite;
                                        -webkit-animation-duration: 1s; /*动画所花费的时间*/
                                        -moz-animation-duration: 1s;
                                        -o-animation-duration: 1s;
                                        animation-duration: 1s;
                                    }

                                    .content-item .img-wrapper .img-arrow-wrapper .opacity-icon-arrow-1 {
                                        -webkit-animation-delay: 0.6s; /*动画延迟时间*/
                                        -moz-animation-delay: 0.6s;
                                        -o-animation-delay: 0.6s;
                                        animation-delay: 0.6s;
                                    }

                                    .content-item .img-wrapper .img-arrow-wrapper .opacity-icon-arrow-2 {
                                        -webkit-animation-delay: 0.4s; /*动画延迟时间*/
                                        -moz-animation-delay: 0.4s;
                                        -o-animation-delay: 0.4s;
                                        animation-delay: 0.4s;
                                    }

                                    .content-item .img-wrapper .img-arrow-wrapper .opacity-icon-arrow-3 {
                                        -webkit-animation-delay: 0.2s; /*动画延迟时间*/
                                        -moz-animation-delay: 0.2s;
                                        -o-animation-delay: 0.2s;
                                        animation-delay: 0.2s;
                                    }

                                    .content-item .type-title {
                                        font-size: (35/3840*100)+vw;
                                        color: rgba(71, 187, 254, 1);
                                        width: (246/3840*100)+vw;
                                        text-overflow: ellipsis;
                                        overflow: hidden;
                                    }

                                    .content-item .type-number {
                                        font-size: (35/3840*100)+vw;
                                        width: (246/3840*100)+vw;
                                        text-overflow: ellipsis;
                                        overflow: hidden;
                                        color: #FFF;
                                        text-overflow: ellipsis;
                                        overflow: hidden;
                                        white-space: nowrap;
                                    }
                                }

                            }

                        }

                    }
                }

            }

            .aside-right {
                width: 24vw;
                margin-left: (30/3840*100)+vw;

                .aside-right-transaction-volume-growth {
                    /*width: 95%;*/
                    /*width: (850/3840*100) + vw;*/
                    // height: 34.9vh;
                    height: (755/2160*100)+vh;
                    background: linear-gradient(180deg, rgba(0, 109, 189, 0.05) 0%, rgba(0, 62, 125, 0.15) 100%);
                    border: 1px solid;
                    border-image: linear-gradient(180deg, rgba(0, 165, 255, 0.4), rgba(71, 158, 206, 0), rgba(60, 159, 213, 0), rgba(0, 165, 255, 0.4)) 1 1;
                    /*margin-left: 4%;*/
                    margin-top: (30 / 2160 * 100) + vh;

                    .no-data-wrapper {
                        height: (540/2160*100)+vh;
                        width: 24vw;
                        display: flex;
                        flex-direction: column;
                        justify-content: center;
                        align-items: center;

                        .img-wrapper {
                            img {
                                width: (200/3840*100)+vw;
                                height: (160/2160*100)+vh;
                            }
                        }

                        .no-data-title {
                            margin-top: (12/2160*100)+vh;
                            font-size: (32/3840*100)+vw;
                            font-weight: 400;
                            color: rgba(71, 187, 254, 1);
                        }
                    }

                }

                .aside-right-operation-status {
                    /*width: (870/3840*100)+vw;*/
                    height: (500/2160*100)+vh;
                    background: linear-gradient(180deg, rgba(0, 109, 189, 0.05) 0%, rgba(0, 62, 125, 0.15) 100%);
                    border: 1px solid;
                    border-image: linear-gradient(180deg, rgba(0, 165, 255, 0.4), rgba(71, 158, 206, 0), rgba(60, 159, 213, 0), rgba(0, 165, 255, 0.4)) 1 1;
                    /*margin-left: (40/3840*100)+vw;*/
                    margin-right: (40/3840*100)+vw;

                    > .title {
                        width: (782/3840*100)+vw;
                        height: (31/2160*100)+vh;
                        margin: (31/2160*100)+vh auto (20/3840*100)+vw;
                        background: url("../assets/title_bk_02@2x.png") center no-repeat;
                        background-size: 100% 100%;
                        text-align: center;
                        font-size: (30/3840*100)+vw;
                        font-weight: bold;
                        color: #fff;
                        line-height: (31/2160*100)+vh;
                    }

                    .content-wrapper {

                        > .context {
                            font-size: (32/3840*100)+vw;
                            font-weight: 400;
                            color: rgba(173, 237, 255, 1);
                            display: flex;
                            justify-content: center;
                            align-items: center;

                            .value {
                                margin: (6/2160*100)+vh (9/2160*100)+vh 0 (18/3840*100)+vw;
                            }
                        }

                        .linear-block-img {
                            width: (800/3840*100)+vw;
                            height: (6/2160*100)+vh;
                            margin: (12/2160*100)+vh auto (22/3840*100)+vw;

                            img {
                                width: 100%;
                                height: 100%;
                            }
                        }

                        .content-data {
                            display: flex;
                            justify-content: center;

                            .left-content {
                                display: flex;
                                flex-direction: column;
                                justify-content: center;
                                margin-right: (15/3840*100)+vw;

                                .context {
                                    font-size: (32/3840*100)+vw;
                                    font-weight: 400;
                                    color: rgba(255, 255, 255, 1);
                                }

                                .value-unit {
                                    display: flex;
                                    min-width: (116/3840*100)+vw;

                                    .value {
                                        font-size: (54/3840*100)+vw;
                                        margin-right: (13/3840*100)+vw;
                                        font-weight: 400;
                                        color: rgba(255, 255, 255, 1);
                                    }

                                    .unit {
                                        font-size: (22/3840*100)+vw;
                                        font-weight: 400;
                                        color: rgba(255, 255, 255, 1);
                                        position: relative;
                                        top: (22/2160*100)+vh;
                                    }
                                }
                            }

                            .right-content {
                                display: flex;

                                .item-wrapper {
                                    display: flex;

                                    .item {
                                        display: flex;
                                        align-items: center;
                                        margin-left: (22/3840*100)+vw;

                                        .img-wrapper {

                                            .line-img {

                                                .line-img-item {
                                                    width: (20/3840*100)+vw;
                                                    height: (2/2160*100)+vh;
                                                    margin-bottom: (4/2160*100)+vh;
                                                }

                                                .line-img-item.new {
                                                    background-color: #26c8ff;
                                                }

                                                .line-img-item.handing {
                                                    background-color: #47e5f9;
                                                }

                                                .line-img-item.closed {
                                                    background-color: #b09cd2;
                                                }
                                            }
                                        }

                                        .data-wrapper {
                                            margin-left: (20/3840*100)+vw;
                                            min-width: (131/3840*100)+vw;

                                            .value-unit {
                                                display: flex;

                                                .value {
                                                    margin-right: (15/3840*100)+vw;
                                                    font-size: (60/3840*100)+vw;
                                                    font-weight: 600;
                                                    color: white;
                                                    line-height: (72/2160*100)+vh;
                                                    min-width: (35/3840*100)+vw;
                                                }

                                                .unit {
                                                    font-size: (26/3840*100)+vw;
                                                    font-weight: 400;
                                                    margin-top: (26/2160*100)+vh;
                                                }
                                            }

                                            .name {
                                                font-size: (25/3840*100)+vw;
                                                font-weight: 400;
                                            }
                                        }

                                        .data-wrapper.new {
                                            .name {
                                                color: #26c8ff;
                                            }

                                            .value-unit {
                                                .unit {
                                                    color: #26c8ff;
                                                }
                                            }
                                        }

                                        .data-wrapper.handing {
                                            .name {
                                                color: #47e5f9;
                                            }

                                            .value-unit {
                                                .unit {
                                                    color: #47e5f9;
                                                }
                                            }
                                        }

                                        .data-wrapper.closed {
                                            .name {
                                                color: #b09cd2;
                                            }

                                            .value-unit {
                                                .unit {
                                                    color: #b09cd2;
                                                }
                                            }
                                        }
                                    }
                                }
                            }
                        }

                        .no-data-wrapper {
                            /*height: 190px;*/
                            /*width: 732px;*/
                            display: flex;
                            flex-direction: column;
                            justify-content: center;
                            align-items: center;
                            margin-top: (24/2160*100)+vh;

                            .img-wrapper {
                                img {
                                    width: (115/3840*100)+vw;
                                    height: (90/2160*100)+vh;
                                }
                            }

                            .no-data-title {
                                margin-top: 0;
                                font-size: (20/3840*100)+vw;
                                font-weight: 400;
                                color: rgba(71, 187, 254, 1);
                            }
                        }

                    }

                }
                .aside-left-warehouse-receipt-evaluation {
                    margin-top: (30/2160*100)+vh;
                    /*margin-left: 4%;*/
                    /*width: 95%;*/
                    /*width: (850/3840*100) + vw;*/
                    height: (731/2160*100)+vh;
                    background: linear-gradient(180deg, rgba(0, 109, 189, 0.05) 0%, rgba(0, 62, 125, 0.15) 100%);
                    border: 1px solid;
                    border-image: linear-gradient(180deg, rgba(0, 165, 255, 0.4), rgba(71, 158, 206, 0), rgba(60, 159, 213, 0), rgba(0, 165, 255, 0.4)) 1 1;

                    .content {
                        width: (600/3840*100)+vw;
                        margin: 0 auto;
                    }

                    .no-data-wrapper {
                        height: (500/2160*100)+vh;
                        /*width: 1080px;*/
                        display: flex;
                        flex-direction: column;
                        justify-content: center;
                        align-items: center;

                        .img-wrapper {
                            img {
                                width: (200/3840*100)+vw;
                                height: (160/2160*100)+vh;
                            }
                        }

                        .no-data-title {
                            margin-top: (12/2160*100)+vh;
                            font-size: (32/3840*100)+vw;
                            font-weight: 400;
                            color: rgba(71, 187, 254, 1);
                        }
                    }

                }

                .aside-left-financing-transaction {
                    /*width: 95%;*/
                    /*width: (910/3840*100)+vw;*/
                    height: (405 / 2160 * 100) + vh;
                    background: linear-gradient(180deg, rgba(0, 109, 189, 0.05) 0%, rgba(0, 62, 125, 0.15) 100%);
                    border: 1px solid;
                    border-image: linear-gradient(180deg, rgba(0, 165, 255, 0.4), rgba(71, 158, 206, 0), rgba(60, 159, 213, 0), rgba(0, 165, 255, 0.4)) 1 1;
                    /*margin-left: 4%;*/

                    .financing-transaction-wrapper {
                        display: flex;
                        align-items: center;

                        .financing-transaction {
                            width: (700/3840*100)+vw;
                            margin: (10/2160*100)+vh auto;

                            .merge {
                                min-width: (160/3840*100)+vw;
                                text-align: justify;
                                text-align-last: justify;
                            }

                            .time {
                                min-width: (203/3840*100)+vw;
                                text-align: justify;
                                text-align-last: justify;
                            }
                            img {
                                width: (200/3840*2.5*100)+vw;
                            }
                            > .item-line-content {
                                display: flex;
                                align-content: center;
                                margin: (30/2160*100)+vh 0;

                                .context-left {
                                    display: flex;

                                    .context {
                                        font-size: (26/3840*100)+vw;
                                        font-weight: 400;
                                        color: rgba(113, 203, 255, 1);
                                    }

                                    .value {
                                        font-size: (26/3840*100)+vw;
                                        font-weight: 400;
                                        color: rgba(173, 237, 255, 1);
                                    }
                                }

                                .status {
                                    width: (80/3840*100)+vw;
                                    height: (36/2160*100)+vh;
                                    border-radius: 6px;
                                    text-align: center;
                                    line-height: (34/2160*100)+vh;
                                    color: #FFF;
                                    font-size: (26/3840*100)+vw;
                                }

                                .status.safe {
                                    background: linear-gradient(180deg, rgba(0, 172, 154, 1) 0%, rgba(0, 126, 111, 1) 100%);
                                }

                                .status.alert {
                                    background: linear-gradient(180deg, rgba(255, 101, 68, 1) 0%, rgba(187, 26, 6, 1) 100%);
                                }

                                .context {
                                    font-size: (26/3840*100)+vw;
                                    font-weight: 400;
                                    color: #71cbff;
                                    width: (200/3840*100)+vw;
                                }

                                .value {
                                    font-size: (26/3840*100)+vw;
                                    font-weight: 400;
                                    color: #adedff;
                                    text-overflow: ellipsis;
                                    overflow: hidden;
                                    white-space: nowrap;
                                }
                            }

                            .item-line-content.special {
                                justify-content: flex-start;
                                // margin-bottom: 20px;
                            }

                            .item-line-content-left-right {
                                display: flex;
                                flex-wrap: wrap;

                                .item-line-content {
                                    width: 50%;
                                    display: flex;
                                    // line-height: 110px;
                                    .marge {

                                    }

                                    .context {
                                        font-size: (26/3840*100)+vw;
                                        font-weight: 400;
                                        color: #71cbff;
                                        width: (104/3840*100)+vw;
                                    }

                                    .value {
                                        font-size: (26/3840*100)+vw;
                                        font-weight: 400;
                                        color: #adedff;
                                    }
                                }
                            }

                        }
                    }

                }


            }

        }

    }

</style>
